神奇的BFC

BFC(block formatting context):块级格式化上下文

简单地理解BFC就是一个HTML块并且满足以下条件之一才会触发

float不为none
overflow不为visible
position的值不为static或者relative
display的值为table-cell,flex,inline-block,inline-flex,table-caption其中的一个.

只要css样式满足上述条件任意一个都会创建一个BFC
例如:

//HTML代码


  aaa
  bbb
  
      ccc

//css样式
#container{
  overflow:hidden;  //此样式的设置已经创建了一个BFC
  background-color:black;
}

在BFC中每个盒子的外边框紧挨着包含块的左边框(或者有边框,依定具体的排列方式)
例如:

盒子对齐

理论上相邻的两个块之间的边距应当是各自所设置的编剧之和,但是实际上并不会,会出现边距折叠的问题:

但是当两个块不在同一BFC中就不存在边距折叠的问题,根据这一原理我们将两个块放在不同的BFC中就可以很好的避免边距折叠的问题了.
例如上图中给三个块设置的上下margin值是相同的,但是红色块和蓝色块在同一BFC中产生折叠,而把绿色块放到了另一个BFC中边距就是二倍了.

这其实就是我们常见的清除浮动的方式之一
当一个元素包含的都是浮动元素时,它自身的高度将会塌陷,会导致许多意想不到的问题
解决方式:给这个父级元素设置overflow:hidden,此时创建了一个BFC,将浮动元素都包含了进去,浮动的元素因此回归正常文档流.

依据:BFC不会与float box 叠加
我们通常实现两列布局时会采用左边左浮动,右边设置margin值,因为如果不设置就会出现重合,环绕的问题.
利用BFC实现两列布局,我们可以让左边左浮动,右边触发一个BFC,就不会与左边重叠

//HTML

  aaa
  bbb

//css
#a{
  background-color:red;
  float:left;
}
#b{
  background-color:blue;
  height:100px;
}

此时的第一个div已经脱离了文档流是浮动在第二个div上边的
如下图

当我们的css样式修改如下

//css
#a{
  background-color:red;
  float:left;
}
#b{
  background-color:blue;
  height:100px;
overflow:hidden
}

效果就是我们想要的啦:

两列布局