CSS 浮动引起父元素高度塌陷

玄玄子2026-06-25 10:16

当某个元素设置了浮动，并且刚好此时它的父元素内部没有其它标准元素后，会导致它的父元素高度坍塌，也就是height为0。

这会影响这块区域的整个布局，我举个例子。

我的页面本来是这样的：

A盒子在B盒子中，B盒子和C盒子上下结构。

这时我希望把A移动到右边去，我想到最好的办法就是直接用一个浮动，当我对A设置了float：right后，页面成了这样：

A的位置是对了，但是B的高度塌陷height=0后，原来占据的空间消失，导致C又向上移动，同时覆盖在A上，这完全把之前的布局打乱了，我其实希望A能依然占据原来的空间。

这就是浮动引起的父元素高度塌陷带来的问题。

解决浮动带来的父元素高度塌陷的方法主要有两个。

css 复制代码

.div{
    overflow:hidden
}

css 复制代码

.div::after{
    content:""
    display:block
    clear:both
}

总结

浮动可能会带来父元素高度塌陷的问题，建议每次使用浮动，都对其父元素使用清除浮动操作，这样一劳永逸，不用费神考虑是否等父元素没有标准盒子的时候再清除浮动，有时候我们也并不保证是否将来的业务会导致兄弟盒子元素会发生增减。

操作方法也很简单，全局定义一个类，它的作用就是清除浮动，只要使用浮动的位置，给其父元素添加这个类名即可。