细谈清除浮动的几种方法

最新推荐文章于 2025-06-02 22:13:22 发布

原创最新推荐文章于 2025-06-02 22:13:22 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #布局 #清除浮动

本文介绍了前端开发中常用的六种清除浮动的方法及其原理，包括使用overflow:hidden、定义伪类after和zoom、双伪元素、添加空div标签及利用overflow:auto等。

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

在前端中经常会在布局方面需要清除浮动，我自己总结了一下，清除浮动的几种方法，也有清除浮动的原理，这也是面试中经常会问到的。

1.overflow:hidden

父元素设置overflow:hidden属性

原理：必须定义width或zoom=1，同时不能定义height。使用overflow：hidden会触发BFC（块级格式化上下文）/（这里的BFC会在后面一篇文章详解），浏览器会自动检查浮动区域的高度。
缺点：不能和position配合使用，因为超出的尺寸会被隐藏。
优点：代码量少，简单。

２.父级div定义伪类：after和zoom

.clearfix:after{
    content:"";
    height:0;
    display:block;
    clear:both;   //清除浮动
    visibility:hidden;
}
.clearfix{
    zoom:1;   // 兼容IE
}

原理：IE8以上才支持 :after
优点：不容易出现错误
缺点：代码多，不易记

3.使用双伪元素清除浮动

.clearfix:before,clearfix:after{
    display:table;
    content:"";
    clear:both;
}
.clearfix{
    zoom:1;
}

缺点：不严谨

4.在结尾处加空div标签：clear:table

在要清浮动的地方的结尾加上一个空div标签

<div class="clearfloat"></div>
.clearfloat{clear:both;}

原理：添加一个空div，利用css提高clear：both清除浮动，让父级div能自动获取高度。

5.父级div定义overflow：auto

原理：必须定义width或zoom：1，使用overflow：auto时，浏览器会自动检查浮动区域的高度。

6.BFC（Block Formatting Contexts）

触发BFC 的几种规则：

浮动元素，float除none以外的值
绝对定位元素：position（absolute，fixed）
display为以下其中之一：inline-blocks，table-cells，table-captions
overflow除visible以外的值：hidden,auto,scroll,inherit（包括IE8都不支持）