原来这就是BFC，遇到样式问题别瞎搞了

看到一篇前端面试题，第一个问题是 什么是BFC ？，一下子唤起了我的辛酸回忆，那是在七月，在沪漂找工作的路上，预约的一个电话面试，眼看着时间就要到了，人生第一次进星巴克，提前百度了一下“星巴克什么咖啡是甜的”，装作很熟练的样子要了杯焦糖玛奇朵，找了个角落坐下来，等着电话铃声响起…> 我们先聊聊css吧，“来说说什么是BFC?” 一下子给我问懵了，后面表现也不是很理想，于是那一下午我真就好好品了一下午焦糖玛奇朵，口感醇厚偏甜，喝多易肥胖

什么是BFC ?

BFC：（Block Formatting Context）

官方解释：A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

翻译过来： 块级格式化上下文 或 块级格式区域 ，块级格式区域包含创建它的元素内部的所有内容，但不包含创建新块级格式区域的子元素内部的所有内容

不太好理解是吧，举个例子：

<div class="box1" id="BFC1"><div class="box2"></div><div class="box3"></div><div class="box4" id="BFC2"><div class="box5"></div><div class="box6"></div></div>
</div> 

解释：

当BFC1为一块BFC区域时，这块区域包含box2、box3、box4，他们是BFC1的子元素

而当BFC2也是一块BFC区域时，他包含box5、box6

总结：

每一个BFC区域只包括其子元素，不包括其子元素的子元素。

每一个BFC区域都是独立隔绝的,互不影响

一个元素不能同时存在于多个BFC中

怎么生成一个BFC区域？

1.根元素（html）,或包含body的元素
2.设置浮动（float），且值不为none（为 left、right），
3.设置定位（position）, 不为static或relative（为 absolute 、 fixed）
4.设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption
5.设置 overflow，且值不为visible (为 auto、scroll、hidden)

满足以上条件之一的即可形成BFC区域

BFC有哪些特性？

1.属于同一个BFC的两个相邻容器的上下margin可能会重叠
2.计算BFC高度时浮动元素也会被计算
3.BFC的区域不会与浮动容器发生重叠
4.所有属于BFC中的盒子默认左对齐，并且它们的左边距可以触及到容器的左边线。最后一个盒子，尽管是浮动的，但依然遵循这个原则
5.BFC是独立容器，容器内部元素不会影响容器外部元素

根据BFC的特性，我们可以解决哪些问题？

1.根据特性1 >>> 解决外边距的塌陷问题

当两个盒子设置100的外边距，会发现应该200px的外边距发生了塌陷，margin重叠只有100px

解决这个问题，将两个盒子放在不同的BFC中即可，我们可以将其中一个元素设置成BFC区域，这里将box2设置为BFC区域，使box1，box2成为两个独立容器互不影响

2.根据特性2 >>> 解决父元素高度塌陷问题

解决这个问题，将父元素设置为BFC区域即可

3.根据特性3 >>> 解决浮动重叠问题

.left设置了浮动，导致 .right 与之重叠

解决浮动重叠，实现自适应两栏效果，使 .right 成为 BFC区域即可

---

写了这么些年css

只知道高度塌陷要overflow：hidden，清除浮动要overflow：hidden，外边距重叠高度不够多加点margin

遇到相关的样式问题就是打开控制台，一个个属性试

原来这就是BFC， GET到了

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享