什么是BFC？

BFC

BFC（Block Formatting Context）即块级格式化上下文

表示页面中一个独立的块级渲染区域，只有块级盒子参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

1、渲染规则

内部的元素会在垂直方向上一个接一个的放置 （块自上而下排列）

垂直方向上的距离由margin决定，属于同一个BFC的两个相邻元素的margin会发生重叠

内部每个元素的左外边距与包含块的padding盒左边界相接触（从左向右），即使浮动也是如此。

封闭性（结界）

计算BFC的高度时，浮动子元素也参与计算（包含浮动子元素不出现高度塌陷）

BFC的区域不会与float的元素区域重叠

不属于同一个BFC的相邻块元素的margin会发生重叠

2、生成BFC的条件

根元素html

浮动(float:left,right)

定位（position:fixed,absolute）

overflow:hidden/scroll/auto

display:inline-block; [display:table-cell,display:table-caption…]

3、解决问题

清浮动

margin值塌陷问题

生成两列布局