BFC（Block formatting context 块级格式化上下文）

1、开启了BFC能解决什么问题？

1. 给父元素开启BFC，其子元素不会再产生 margin 塌陷问题。
2. 自己不会被其他浮动元素所覆盖。
3. 就算其子元素浮动，元素自身高度也不会塌陷。

2、如何开启？

1. 根元素
2. 浮动元素
3. 绝对定位、固定定位的元素
4. 行内块元素
5. 表格单元格: table、 thead、 tbody、 tfoot 、 th 、td、tr、caption。
6. overflow 的值不为 visible 的块元素
7. 伸缩项目
8. 多列容器
9. column-span 为 all 的元素 (即使该元素没有包裹在多列容器中)
10. display 的值，设置为 flow-root

例

1. 根元素（html）
2. 浮动元素 （元素的 float 不是 none）
3. 绝对定位元素 （ position 为 absolute 或 fixed）
4. 内联块 （ display: inline-block ）
5. 表格单元格 （ display: table; , display: table-cell; , display: table-caption;）
6. 具有overflow 且值不是 visible 的块元素.
7. 伸缩项目（把父容器变成伸缩容器，如 display:flex;）
8. column-span: all; column-span 属性指定某个元素应该跨越多少列。 例如 3列： column-span: 3; |三 三 三| 
display: flow-root;

总结

以上9种方式多多少少都有副作用，而display: flow-root;的副作用最低（就是部分浏览器不支持）。

BFC就是这样一个东东，不好下定义，但是可以举例说明。

喝水不忘挖井人，感谢尚硅谷教育的免费课程