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

我报名参加金石方案1期应战——瓜分10万奖池，这是我的第3篇文章，点击检查活动详情

看到一篇前端面试题，第一个问题是 什么是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到了