什么是高度塌陷?
当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷。
高度塌陷怎么解决?
方法一:给父元素一个固定的高度
缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推荐使用。
方法二:给父元素添加属性 overflow: hidden;
优点:浏览器支持好,简单;
缺点:当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。
方法三:在子元素的末尾添加一个空的 div ,并设置下方样式
div{
clear: both;
height: 0;
overflow: hidden;
}
优点:所有浏览器都支持,并且容器溢出不会