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、清除浮动造成得塌陷

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

塌陷.png

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

BFC.png

2、避免外边距重叠

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

margin重叠.png

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

BFC.png

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

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

    
    
汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。

文字环绕.png

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

    
    
汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。

BFC.png