BFC

用于决定块盒子的布局及浮动相互影响范围的一个区域。

BFC是元素在拥有某些特定属性才显示的一种属性,有BFC特性的元素和其他普通流中的元素在样式上没有区别。但在功能上,具有BFC的容器内部与外部隔离,即容器内部的元素不会再布局上影响外部元素。

有BFC属性的容器可以包含浮动元素、会阻止外边距折叠、可以阻止元素被浮动元素覆盖。

触发:

  • 根元素或其它包含它的元素
  • 浮动 (元素的 float 不为 none)
  • 绝对定位元素 (元素的 position 为 absolute 或 fixed)
  • 行内块 inline-blocks (元素的 display: inline-block)
  • 表格单元格 (元素的 display: table-cell,HTML表格单元格默认属性)
  • 表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
  • overflow 的值不为 visible的元素
  • 弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

清除浮动:after

    • 通过为容器添加:after伪元素,并给伪元素设置overflow属性,添加IEhack,实现清除浮动。也是网上使用比较多的方法。 
      .clearfix{(*zoom: 1;} 
      .clearfix:after{content:”;height:0;display:block; clear:both;/overflow:hidden; /*clear,overflow二选其一*/}

原文地址:https://www.cnblogs.com/laojun/p/8527788.html