1.简介
- BFC是Block Formatting Context(块级格式上下文),可以理解成元素的一个“特异功能”。
- 该“特异功能”,在默认的情况下处于关闭状态;当元素满足了某些条件后,该"特异功能被激活。
- 所谓激活"特异功能”,专业点说就是:该元素创建了BFC (又称: 开启了BFC)。
2.BFC的作用
- 元素开启BFC后,其子元素不会再产生margin塌陷问题。
- 元素开启BFC后,自己不会被其他浮动元素所覆盖。
- 元素开启BFC后,就算其子元素浮动,元素自身高度也不会塌陷。
3.开启BFC
- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素
- 表格单元格: table、 thead、 tbody、 tfoot、 th、 td、 tr 、caption
- overflow的值不为visible 的块元素
- 伸缩项目
- 多列容器
- column-span为all 的元素(即使该元素没有包裹在多列容器中)
- display的值,设置为flow- root