了解关于BFC的那些事

关于BFC

  BFC是一个独立的渲染区域，规定块元素的布局规则，只有块元素才能参与。
  布局规则
    

1. 块元素独占一行，上下排列
2. 同一个BFC两个块元素上下margin会重叠
3. 盒子的左边边框和外边距相邻
4. 浮动区域和BFC区域不会重叠
5. 每一个BFC区域是独立的，相互之间不会影响
6. BFC计算高度时，浮动区域也参与高度计算

  触发条件

1. html根元素
2. 浮动left right
3. 定位 absolute fixed(固定定位）
4. 元素类型转化 display:inline-block,table-cell,table-caption,flex,inline-flex
5. overflow:hidden,scroll auto(默认值visible不可）

  BFC解决的问题

1. 浮动产生的高度塌陷（原理：BFC计算高度时，浮动区域也参与高度计算）
2. 自适应两栏布局（原理：浮动区域和BFC区域不会重叠）
3. 解决margin重叠的问题（原理：每一个BFC区域是独立的，相互之间不会影响）