前端面试：被问到BFC，要这样答才能满分

保险经纪

前台

营业员

服务员

人事

客服

保安

洗碗工

平面设计

会计

电工

迎宾

仓车管理

结果确实这样：

由于span标签(子模块)的浮动，脱离了文档流，因此不再会帮助父容器撑开高度，就导致了常见的“浮动塌陷”现象，而要解决这一现象，我们就需要清除浮动，这里我们就可以用到BFC了：

触发BFC的条件很多，这里我们以向父元素添加overflow(hidden)为例：

（下面一节，我会为大家总结触发BFC条件有哪些常用方式）

div {

/我们只需要在原基础上，向父元素添加overflow：hidden属性即可/

overflow: hidden;

width: 300px;

padding: 10px;

background-color: #fae8c8;

}

效果

可见，只需要给父容器设置overflow: hidden属性就会触发BFC特性，这个父容器就会变为一个特殊的“BFC容器”。

其实这里展现了一个BFC的关键特性，即：计算BFC的高度时，浮动元素也会参与计算。因此这就是为什么BFC能清除浮动带来的负面效果的原因了！

[](()3.2 处理外边距合并/塌陷

假如我们有这样两个元素：

我们分别给蓝色模块设置下外边距，以及给红色模块设置上外边距，假定给这两个外边距分别设置20px，那么我们很容易想到：两模块的距离 = 20px + 20px，也就是中间相隔40px距离。

代码实践如下：

css

html

结果却不尽人意：

没错，两个外边距合并在了一起，因此也被称为“外边距合并”。(若两边距不相等，选其最大的外边距作为两者之间的距离)。要想解决外边距合并的问题，我们可以将这两个元素分别包裹在一个有BFC属性的盒子中：

css

html

/分别将两个元素包裹在一个附带BFC属性的容器中/

< 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 /div>

效果

因此，BFC的第二个作用，即：处理元素外边距塌陷问题。

[](()3.3 时浮动元素不再遮盖普通元素

我们都知道浮动元素会脱离文档流，这样就有可能造成遮蔽其他普通元素的负面情况，如下：

我们可以看到橙色浮动元素遮蔽了绿色普通元素，那么我们想让平面排开，不再互相影响，就可以给普通元素添加BFC属性来完成：

css