结果确实这样：
由于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
141
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
