前端——BFC

一、什么是BFC？

1.BFC是 Block Formatting Context(块级格式上下文)，可以理解成元素的一个“特异功能”。

2.该"特异功能"，在默认的情况下处于关闭状态;当元素满足了某些条件后，该“特异功能”被激活。

3.所谓激活“特异功能”，专业点说就是:该元素创建了 BFC(又称:开启了 BFC)。

 

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

1.元素开启 BFC后，其子元素不会再产生 margin 塌陷问题。

2.元素开启 BFC后，自己不会被其他浮动元素所覆盖。

3.元素开启 BFC后，就算其子元素浮动，元素自身高度也不会場陷。

 

三、如何开启BFC？

1.根元素

2.浮动元素

3.绝对定位、固定定位的元素

4.行内块元素

5.表格单元格:table、thead、tbody、tfoot、th、td、tr、caption

6.overflow 的值不为 visible 的块元素

7.伸缩项目

8.多列容器

9.column-span 为a11的元素(即使该元素没有包裹在多列容器中)

10.display 的值，设置为flow-root