BFC应用详解

BFC是什么？BFC如何生成？

1.BFC（Block Formatting Context ）块级格式化上下文。BFC是CSS里的一种规则。
2.生成BFC的方法：1）display：flex，display：inline-block，dispaly：inline-flex，display：table-cell，display：table-caption。 这几种中的任意一种。2）position为fixed或absolute。 3）overflow不为visible。4）本质上根元素也会生成BFC。

BFC作用

• 当同一个BFC中的两个盒子同时具有相对方向的外边距时，外边距会发生叠加(Margin Collapse)，当兄弟盒子的外边距不一样时，将以最大的那个外边距为准。

  
  
  

  同一BFC外边距合并
  
  
  

  不同BFC外边距不合并

• BFC清除浮动：计算BFC的高度时，浮动元素也参与计算

  
  
  

  浮动父容器塌陷
  
  
  

  BFC清除浮动

• 根据BFC的区域不会与float box重叠，实现自适应两栏布局。

  
  
  

  自适应两栏布局

BFC解决父子关系外边距合并的方法

父子关系外边距合并

如上图所示：边距合并造成了，和我们预期的效果不一样。即容器之间margin为20px，父容器内部H1边距为40px.

解决方法：

边框法

内边距法

行内块法

浮动法

利用BFC解决父子级外边距合并的方法很多，但是相对应的也会带来一些影响，例如inline-block会导致收缩，缝隙，2.浮动导致容器浮动，
3.绝对定位导致脱离文档流（注意只有absolute，和fixed有效，relative不会产生效果）。还有display为table等等。相对影响较小的方法是overflow:hidden,和overflow:auto，但是在对应的场景下还会产生影响，例如需要下拉菜单时，就不应该设置overflow:hidden。

选择对场景影响最小的方案才是王道！

代码

外边距合并
外边距不合并
父容器塌陷
父容器形成BFC清除浮动
自适应两栏布局