What is BFC

BFC是什么

BFC全称是block formatting context，也就是块级格式化上下文。那么它是什么意思呢？又有什么用呢？我们可以把它理解为是一个与外界隔离的盒子，盒子里面不管怎么折腾都不会影响到外面的布局。利用这一特性可以解决一下经常遇到的问题。

什么条件触发BFC

既然BFC有这样的特性，那怎么样的容器才能算是BFC呢？满足以下条件的容器即触发了BFC：

• float：left/right（不为none的）。

• overflow：hidden/scroll/auto

• display：tebal-cell/table-caption/inline-block/flex

• position：absolute/fixed（不为relative和static的）

常见的哪些问题可以用BFC解决

1、清除浮动造成得塌陷

浮动元素因为脱离了标准文档流会导致塌陷产生，所以父元素没有了高度。

<div style="background: red; border: solid;">
    <p style="float: left;width: 100px;height: 100px;background: blue"></p>
</div>

塌陷.png

根据BFC的特性，我们可以通过overflow: hidden;给浮动元素的父元素设置为BFC，让里面的元素不影响外面的布局，用来清除浮动导致的塌陷。

<div style="background: red; border: solid;overflow: hidden;">
    <p style="float: left;width: 100px;height: 100px;background: blue"></p>
</div>

BFC.png

2、避免外边距重叠

如果在同一个BFC中，两个元素设置了上下margin外边距，会发生重叠，即边距大的那个生效。（这不是bug，而是规范）

<div style="background: red; height: 100px;margin-bottom: 100px;"></div>
<div style="background: blue; height: 100px;margin-top: 100px;"></div>

margin重叠.png

我们给上面元素设置了下边距100px，下面元素设置了上边距100px，发现只生效了100px。这时我们使用BFC来避免这种问题：

<div style="overflow: hidden;">
    <p style="background: red; height: 100px;margin-bottom: 50px;"></p>
</div>
<div style="overflow: hidden;">
    <p style="background: blue; height: 100px;margin-top: 50px;"></p>
</div>

BFC.png

当我们把两个元素放在不同的BFC当中，上下边距各是50px，显示出来也正好是100px，完美解决！

3、避免浮动造成的文字环绕

<div style="width: 200px">
    <img src="https://img.haomeiwen.com/i3473978/a62b4441252d5ed4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="50" height="50" alt="" style="float: left;">
    <p style="background: red;">汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。</p>
</div>

文字环绕.png

我们给文字元素设置为BFC，环绕消失了，也可以正常设置浮动元素的右边距了。

<div style="width: 200px">
    <img src="https://img.haomeiwen.com/i3473978/a62b4441252d5ed4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="50" height="50" alt="" style="float: left;">
    <p style="background: red; overflow: hidden;">汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。</p>
</div>

BFC.png