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。
张鑫旭大神文章:这里