【CSS】1分钟速览经典样式——浮动

浮动元素添加了flow属性，会被移出正常文档流，并被拉到文档的边缘，文档流重新排列并包围它所在的空间。在报纸和杂志很常见，所以css增加了浮动来实现这种效果，这是浮动设计的初衷。

浮动本身并不是为了实现布局而设计的，但在近20年时间里被当成布局工具。是因为那个年代它是唯一的选择，flexbox和网格布局近几年才出现。

浮动元素不同于普通文档流元素，它们的高度不会添加到父元素。容器折叠是指父容器并没有包含到浮动的容器，因为浮动的元素高度不会加到父容器上。

如何解决容器折叠的问题

使用和浮动float配套的clear属性。将一个元素放置到父容器的末尾，并对它使用clear: both，元素将移动到浮动元素的下面，而不是侧面。容器就会扩展包含它。更加优雅的做法，是使用伪元素。这一做法称为清除浮动。

.clear::after { // 选中容器末尾的伪元素

content: ' '

clear: both // 清除浮动

display: block // display非inline，clear只对块级元素生效，加上content属性，使得伪元素出现在文档中

}

浮动元素的外边距不会折叠到容器外，而非浮动元素外边距则会折叠。为了包含所有外边距，清除浮动修改版如下。

.clear::after,

.clear::before { // 选中容器开始和末尾的伪元素

content: ' '

display: table // table可以包含外边距

}

.clear::after { // 只有末尾需要清除浮动

clear: both // 清除浮动

}

有一种典型网页布局，左边是图片，右边是文字，称为媒体对象模式。实现方案有很多种，可以用flexbox和网格布局等，这里讲下如何用浮动实现。

对图片设置浮动到左边，右边文字会围绕图片，可能会到图片的底下。但是我们预期是文字在图片右侧排列，不会到图片底部。

使用块级格式化上下文（block formatting context, BFC）解决。BFC里面的内容不会和外部元素重叠或相互影响。添加如下元素可以创建

●float: left, right，不为none即可

●overflow: auto, hidden, scroll，不为visible即可

●display: inline-block, table-cell, flex, grid。有这些属性的元素是块级容器

●position: absolute或fixed

通常采取设置overflow: hidden或auto，是创建BFC最简单的方式。

以上就是今天和大家分享的浮动核心知识，希望能让你更好的理解界面样式。喜欢的朋友可以点赞，关注加收藏，互相学习，共同成长！