关于BFC

BFC 是什么？

首先BFC(Block Formatting Contexts)中文是块级格式化上下文。BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。并且，在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的布局规则：
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的垂直方向的margin会重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算

如何生成 BFC？

满足下面条件的任何一点，都会生成BFC

• 根元素（整个页面就是一个大的BFC）；
• float属性不为none；
• position为absolute或fixed；
• display为inline-block, flex, 或者inline-flex；
• overflow不为visible；

BFC 有什么作用？

1.左右两栏布局

image.png

让右边的div生成BFC就可以实现两栏布局

2.清理内部浮动

image.png

让父元素形成BFC，BFC也会计算其内部浮动子元素的高度。

3.防止margin重叠：

image.png

同一个BFC中的相邻Box垂直方向的margin会重叠，故要解决margin重叠问题，只需要让两个p元素处于不同的BFC就ok了。第一个p元素属于根元素BFC中，第二个p元素被div包裹属于新的BFC中。