2.10 CSS BFC

CSS BFC"/>

2.10 CSS BFC

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