清除浮动的方法（清除浮动后造成的影响）

最新推荐文章于 2022-12-29 15:26:06 发布

转载最新推荐文章于 2022-12-29 15:26:06 发布 · 305 阅读

本文介绍四种常见的CSS清除浮动的方法：额外标签法、父级添加overflow属性、使用after伪元素及before和after双伪元素。每种方法都有其优缺点，如代码简洁性和浏览器兼容性等问题。

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

1. 额外标签法

是w3c推荐的做法是通过在浮动元素末尾添加一个空的标签

例如：<div style="clear:both"></div>，或者其他标签 <br> 等亦可。

<div class="father">
       <div class="big"> </div>
       <div class="small"> </div>
       <div style="clear: both;"></div> 
</div>

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差。不值得拥有。

2. 父级添加overflow属性方法

通过出发BFC的方式，可以实现清除浮动效果。

给父级添加：overflow为 hidden | auto | scroll 都可以实现。

.father {
           border-style: solid;
           border-width: 10px;
           border-color: red;
           overflow: hidden; 方式二父级添加overflow属性方法
       }

<div class="father">
       <div class="big"> </div>
       <div class="small"> </div>
       <div style="clear: both;"></div> 
</div>

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

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

:after方式为空元素的升级版，好处是不用单独加标签了

使用方法：

.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hiden;
}

.clearfix {
    *zoom: 1;
}

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

确定：由于IE6-7不支持 after，使用zoom:1出发 hasLayout

4. 使用before和after双伪元素清除浮动

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

优点：代码更简洁

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。