结果确实这样:
由于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