清除浮动，有哪些方法？BFC

两个小方块元素是浮动的，浮动的元素会脱离文档流

BFC：块级格式化上下文

BFC是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

• body 根元素

• 浮动元素：float 除 none 以外的值

• 绝对定位元素：position (absolute、fixed)

• display 为 inline-block、table-cells、flex，table-caption

• overflow 除了 visible 以外的值 (hidden、auto、scroll)

凡脱离文档流都可以产生BFC

BFC作用

• 清除浮动：BFC会包含创建它的元素内部的所有内容（包含浮动元素）

• 外边距折叠：解决同一BFC容器中的相邻元素间的外边距折叠问题

• 左图右文布局：利用浮动元产生BFC以及BFC之间不会互相覆盖实现左图右文布局

BFC常见用法

• 清除浮动防止高度塌陷

• 处理外边距折叠的问题

• BFC 可以阻止元素被浮动元素覆盖

清除浮动的方法（五种）

• 结尾添加空div元素，设置clear：both(不推荐) (额外标签法)

  • 添加无意义标签，语义化差，页面结构混乱，不推荐。

• 为父元素创建BFC（不推荐）

  • 父级div定义overflow:hidden

• 为父元素设置固定高度

• 使用伪元素来清除浮动(使用在父元素上面，推荐)

 .clearfix::after{
     content:"";/*设置内容为空*/
     height:0;
     display:block;*将文本转为块级元素*/
     visibility:hidden;/*将元素隐藏*/
     clear:both;/*清除浮动*/
 }
 .clearfix{
     *zoom:1;/*兼容ie，解决ie6,ie7浮动问题*/
 }

• 使用before和after双伪元素清除浮动(推荐)

.clearfix::before,.clearfix::after{
     content:"";
     display:block;
     clear:both;
 }
 .clearfix{
     *zoom:1;
 }

.clearfix类绑定到外层非浮动元素上，clear: both属性确保外层元素在进行高度计算时包含内部浮动元素。

使用clearfix清除浮动的元素本身并未产生BFC，依靠的是CSS的clear属性。即该元素若没有其他属性产生BFC时仍然按照普通文档流进行定位，垂直外边距还是存在折叠。