css 清除浮动的几种方法

最新推荐文章于 2025-07-04 17:31:59 发布

原创最新推荐文章于 2025-07-04 17:31:59 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

57 篇文章

订阅专栏

本文介绍了在CSS布局中解决浮动元素导致父元素高度塌陷的问题，包括空标签法、clearfix方法及overflow方法，并提供了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

清除浮动
包括清除子元素的浮动和清除上级元素的浮动
其中，清除上级元素的浮动，只需设置clear为both就OK了，
而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。而空标签法清除子元素浮动会增加额外标签。
一个块级元素如果没有设置height的大小，那么该元素的高度就是由里面的子元素来撑开的，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，此时给父元素设置border或者background都得不到正确的解析

<div class="clearfix">
   <div style="background: red;width:100px;height:100px;float: left;"></div> 
   <div style="background: green;width:100px;height:100px;float: left;"></div> 
   <div style="background: blue;width:100px;height:100px;float: left;"></div>
</div>

方法一：增加一个空的div标签

<div class="clearfix">
   <div style="background: red;width:100px;height:100px;float: left;"></div> 
   <div style="background: green;width:100px;height:100px;float: left;"></div> 
   <div style="background: blue;width:100px;height:100px;float: left;"></div>
   <div style="clear:both"></div>
</div>

方法二：给父元素增加一个clearfix类
该clearfix类的样式为：

.clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }