使用after伪元素清除浮动（推荐使用）

最新推荐文章于 2025-05-20 10:04:41 发布

原创最新推荐文章于 2025-05-20 10:04:41 发布 · 884 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3

未定义专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用CSS伪元素after来清除浮动的方法，该方法遵循闭合浮动思想，保持了良好的结构语义化。通过设置特定的样式属性如content、display、height、clear和visibility，可以有效地解决因浮动引起的布局问题。然而，此方法在IE6-7中不被支持，需使用zoom:1来触发hasLayout。

使用after伪元素清除浮动（推荐使用）

  .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.