什么是高度塌陷?
父元素没有设置宽高,子元素多高,父元素就多高,子元素设置了浮动,如果下面的与父元素同级的元素没有设置浮动,那就跟这个子元素重叠,是因为这个子元素脱离了文档流。不按一行一行地显示。
脱离文档流:
元素不按照自上而下,从左到右排列,在文档流中不占据空间,处于浮动状态。
导致脱离文档流的因素:
(1)浮动 float
(2)绝对定位 display:absolute;
(3)display:fixed;
以第一种情况为例:
预期情况:
结果:
这样会造成页面混乱。
解决方案:
方案一:给父盒子加上宽高,占住那个位置。
方案二:先添加一个内容,让父它变成块级元素,最后再清除两侧浮动。
.box1::after{
content:"";
display:block;
clear:both;
}