一、什么是BFC

BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，只有块参与，它规定了内部的块元素如何布局，并且与这个区域外部毫不相干。

二、BFC的布局规则

  1. 内部的Box会在垂直方向，一个接一个的布置。
  2. 属于同一个BFC的两个相邻Box的margin会发生重叠。
  3. BFC的区域不会与float box重叠。
  4. BFC容器里面的元素不会影响到外面的元素。
  5. 计算BFC的高度时，浮动元素也参与计算。

三、触发BFC的条件

  1. 根元素（html）
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block，table-cell，table-caption，flex，inline-flex
  5. overflow不为visible

四、BFC的应用

1.根据BFC规则3实现“自适应两栏布局”





Document






2.根据BFC规则5解决高度塌陷

...