一、什么是高度塌陷?
正常情况下,父元素会被子元素撑开,所以一般父元素不会去指定宽度和高度,而是根绝子元素来决定。当子元素设置成float后,子元素会脱离文档流,这是父元素的高度会变成0,于是发生了高度塌陷。
二、解决高度塌陷的办法
解决高度塌陷的方法就是开启父元素的BFC。有一下三种方式:
1.给父元素指定好高度。(有局限)
2.父元素设置overflow: hidden。(有局限)
3.设置一个clearfix类,并给父元素的class指定一个classfix类。clearfix的CSS为:
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
三、absolute导致的高度塌陷
当子元素设定为position: absolute时,也会发生父元素的高度塌陷,此时,必须要用js才能解决。等我学到js相应的位置后后再来补充。