CSS：清除浮动和BFC

• 清除浮动
  • 1、父级：after伪元素_
  • 2、 父级双伪元素
  • 3、父级overflow:hidden
  • 4、额外标签法，使用空div
  • 5、使用BFC

清除浮动

·清除浮动的本质是：清除浮动元素脱离标准流造成的影响，解决高度塌陷和垂直外边距重叠问题
·清除浮动的策略是：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外其他盒子
·为什么要清除浮动：①父级没高度 ②子盒子浮动了 ③影响下面布局了，该清除浮动了

BFC

BFC（Block Formatting Contexts 块格式上下文）是一种独立的渲染环境，它可以使其子元素隔离开来，避免与外部元素的布局冲突。它可以用于清除浮动和实现复杂的布局。当一个元素有BFC属性时，它会在页面上创建一个渲染区域，里面的元素不会影响外部的元素，而外部的元素也不会影响里面的元素，从而达到自我隔离的效果。

BFC和清除浮动的关系

清除浮动的问题可以用BFC解决，也可以用其他方式解决。BFC主要用于约束元素的相互作用以及布局，而清除浮动则是让父元素来支撑子元素的显示。

清除浮动有哪些方式？

1、父级：after伪元素

//父元素上使用clearfix类
.clearfix:after{
  content:"";
  display:block;
  clear:both;
}

//IE 6、7专有
.clearfix{
  *zoom:1
}

2、 父级双伪元素

//父元素上使用clearfix类
.clearfix:after,.clearfix:before{
  content:"";
  display:table;
}
.clearfix:after{
   clear:both;
}

//IE 6、7专有
.clearfix{
  *zoom:1
}

3、父级overflow:hidden

//父元素上使用clearfix类
.clearfix{
 overflow:hidden;
}

4、额外标签法，使用空div

在需要清除的元素后面加一个使用clear:both类的空的div

div{
  clear:both
}

5、使用BFC

BFC是一种布局模型，它可以帮助我们控制元素的位置和尺寸，把元素组织起来，避免其互相影响。下面是一些BFC常用的方法：

display：
·设置浮动float，不包括none
·行内块显示模式/表格单元格，inline-block/table-cell
·弹性布局，flex
position：
·设置定位，absoulte或者fixed
overflow：
·设置overflow值不为visible，为 auto、scroll、hidden