一个例子搞懂BFC

BFC：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的概念，规则，我是记了又忘，忘了又记。说白了，就是不太扎实，不理解BFC的概念是什么。

我第一次接触到这三个字母，是在一篇清除浮动的文章。那时候我能理解clear：both，能理解伪类，但是就是理解不了这个BFC。但在一次无意识的小demo中，我突然发现了BFC是什么意思。废话不多说，先上一个小例子：

如果你写过轮播图，那么你一定写过下面一个个小圆圈的可控元件。它控制着我们翻到哪页。我在实现它的时候，结构常常是这样：

<section class="silder">
		<ul>
			<li class="point"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
</section>

然后将整体section进行固定定位，li浮动成一排

.silder{position: fixed;bottom: 0px;right: 0px;z-index: 99}
.silder ul li{width: 14px;height: 14px;float: left;border: 1px solid white;margin:5px;border-radius: 50%}

然后就得到我们想要的样式啦。可是！！子元素浮动，父元素为什么没有塌陷？？我并没有清除浮动

这让我想起了BFC触发条件：

根元素
float属性不为none，也就是left/right
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible，也就是auto/hidden...

那么我们这个例子就构成了一个BFC，父元素固定定位，内部形成了一个BFC区域。

那么BFC区域有哪些特征呢？

首先引用张鑫旭大神的一句话：内部乱成什么样子，都不会影响到外面！

我觉得比较重要的几点：

1.BFC区域不会与float区域重叠，这个很好理解，float后的元素总是很嚣张，总是会盖住抢占它位置的元素，但是面对BFC并不会，二者会像都是浮动元素一样，挨着排列

<div class="float"></div>
<div class="bfc"></div>

.float{width: 50px;height: 50px;background-color: black;float: left;}
.bfc{display: inline-block;width: 100px;height: 100px;border: 1px solid black;}

效果：

2.BFC区域计算高度会计算浮动元素：这也是为什么能清除浮动的原因了！！！我们只要把塌陷的父元素，设置为BFC区域，就解决了该问题。比如添加overflow：auto，本质上就是变成BFC。

3.属于同一个BFC的两个相邻Box的margin会发生重叠，这个没什么说的，所有元素都这样的原因：根元素就形成了BFC范围。

在cue一下我爱的张鑫旭大神，其中有一点要注意：当float元素与BFC区域挨着时，如上图例子，你设置BFC元素的margin是很难给他俩分开的，但是可以给浮动元素设置margin-right。

张鑫旭大神文章：这里

猜你喜欢