BFC知识点

1.BFC是块级格式化上下文，独立渲染区，只有块元素参与BFC布局逻辑，内部的(box)盒会在垂直方向上依次放置。

2.box垂直方向的距离由margin决定，属于同一个BFC相邻两个box的上下margin会发生重叠，按照margin的最大值设定。

3.每个元素的margin的box左边与包含块border box的左边相接触。

4.BFC区域不会与float box重叠。

5.BFC是页面上隔离独立的容器，容器里面的子元素不受外面的影响。

6.计算BFC高度时，浮动元素也参与计算。

触发BFC有哪些条件

1.根元素HTML。

2.float浮动属性不为none。

3.绝对定位position：absolute；或者固定定位position：fixed；

4.display为inline-block，table-cell，table-caption，fixed，inline-flex。

5.overflow不为visible。

BFC有哪些应用

1.解决高度塌陷问题。

2.防止上下margin重叠。

3.完成自适应两栏布局（左固定，右自适应）

高度塌陷，由于子元素浮动，父元素没有设定高度，导致父元素出现高度塌陷