原来这就是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.

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

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

解释

当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区域，这里为box1包裹一层div设置overflow：hidden使其成为BFC区域，使box1，box2成为两个独立容器互不影响

方法二：给其中一个元素设置display：inline-block，同样可以使其成为BFC区域

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

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

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

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

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

注意：针对大家的疑问做一些补充

利用BFC解决父子级外边距合并的方法很多，相对应的也会带来一些影响。
例如：

• inline-block会导致改变元素形式，可能会有收缩，缝隙等情况。
• 设置float，会让元素产生浮动
• 绝对定位会导致脱离文档流（注意只有absolute，和fixed有效，relative不会产生效果）

......

相对影响较小的方法是overflow:hidden,和overflow:auto，但是在对应的场景下还会产生影响，例如需要下拉菜单时，就不应该设置overflow:hidden

针对不同的应用场景需要具体问题具体分析，选择最适合的方法解决

• • • 写了这么些年css

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

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

原来这就是BFC， GET到了