清除浮动最有效的css写法

最新推荐文章于 2025-06-02 17:01:47 发布

原创最新推荐文章于 2025-06-02 17:01:47 发布 · 2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #清除浮动

css3 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了五种常见的清除浮动的方法，包括使用空div标签、overflow属性、浮动父元素、:after伪元素等，并对每种方法的优缺点进行了分析。

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

说起来呢，基本上只要你给容器div加了float的属性，就需要清除浮动来使页面显示正常，那么，到底有什么方法可以让浮动轻松清除呢？
可以用display：flex;替代，但是它对IE8，9支持不是很好，所以不怎么这么用。

1.在容器div的里面结束标记之前写如下这样的div这段代码：

<div style="clear:both"></div>

虽然通俗易懂，容易掌握，但是在页面中加入了一个无意义的空标签，违背了结构和表现分离的web标准的精髓，如果页面空标签多的话，对于后期的维护会造成一定的困难。一般来说，现在已经不采用这种方法。

2.在浮动容器div的css样式中加入overflow属性。

3.将父元素也变成浮动元素，但是影响整个页面的布局，不推荐使用。

4.使用:after伪元素，一般增加clearfix的class，大概写法如下：

.clearfix:after{
   content:".";/*加一段内容*/
   display:block;/*让生成的元素以块级元素显示，占满剩余空间*/
   height:0;/*避免生成的内容破坏原有布局高度*/
   clear:both;/*清除浮动*/
   visibility:hidden;/*让生成的内容不可见*/
  }
  .clearfix{zoom:1;/*为IE6，7的兼容性设置*/}

除了clear:both;是为了清除浮动以外，其他的属性就是为了隐藏这个元素，所以我们对它进行了改进一下：

 .clearfix:after,.clearfix:before{
   content:".";/*加一段内容*/
   display:table;/*创建匿名的表格单元，触发bfc*/
}
 .clearfix:after{
   clear:both;/*清除浮动*/
  }
 .clearfix{zoom:1;/*为IE6，7的兼容性设置*/}

.clearfix:before，加上before，对清除浮动没什么作用，防止浏览器顶部空白崩溃，也就是说，margin-top和上一个盒子的margin-bottom它们会发生一个叠加，这么做就是防止叠加，其实没有这个需要，去掉before也没啥问题。
原理和第一种方法差不多，就是用clear:both;

使用的原理基本上就是触动bfc，
bfc：block formating contexts 块级格式化上下文
比如下面这些就是：
float：left;
overflow：auto;
display：table-cell;
display:table-caption;
display:inline-block;
position:fixed;
position:absolute;

目前就是用最后的一种方式来进行清除浮动，毕竟优雅~~~