目录
一、什么是盒子高度塌陷
盒子高度塌陷:
二、解决方法
方法1、可以在父元素下面加个 ::after 伪类
方法2、可以直接设定父元素的高度
方法4、可以在子元素的最后面增加
方法5、可以在父元素增加浮动
本应在父盒子内部的元素跑到了外部
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
<div class="d1"> <div>子元素内容</div> <div>子元素内容</div> </div>
.d1 div{ float: left; height: 100px; width: 100px; border: 1px solid rgb(29, 28, 28); background-color: skyblue; } .d1{ background-color: slateblue; border: 1px solid green; }
此时的子元素无法撑起父元素的高度
.d1::after{ content: ""; display: block; clear: both; }
此时的父元素的高度就与子元素的高度一致,宽度与页面浏览器保持一致
缺点:在后期子元素内的高度若是有改动,可能会对父元素造成影响。并且更改时,对高度也要进行计算。
这时的父元素高度等于子元素的高度,但是可能会造成滚动条的出现,即使滚动条之外的页面并没有内容,但滚动条依旧存在,影响美观。
<div class="d1"> <div>子元素内容</div> <div>子元素内容</div> <br style="clear: both;"> </div>
此时的父元素的高度等于子元素的高度,宽度等于页面浏览器的宽度
此时的父元素的高度与子元素的高度一致,宽度也是一致
缺点:浮动会使页面布局较为难以掌控