描述:父元素高度适应,子元素浮动后造成父元素高度为0,就叫做高度塌陷问题
解决方案:
1、给父元素设置overflow:hidden;
原理:设置overflow:hidden;触发了BFC的状态,闭合了子元素的浮动,子元素重新参与了父元素的高度计算,父元素高度不再为0
缺点:显示在父元素框之外的内容会被隐藏
2、在浮动元素的末尾添加一个空div,并设置如下样式:
.clearfix{clear:both; height:0; overflow:hidden;}
注:后两个属性是为了解决在IE6下不能识别较小高度的容器的问题的
缺点:在页面中出现若干个这样的div,会造成代码冗余
3、万能清除浮动法
父元素:after{content:""; display:block; clear:both; height:0; overflow:hidden; visibility:hidden;}
优点:官方推荐
解决高度塌陷问题
最新推荐文章于 2024-08-17 22:24:13 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)