首页技术文章正文

CSS如何清除浮动？清除浮动的方法有哪些？

更新时间:2021年09月29日17时40分来源:传智教育浏览次数:

好口碑IT培训

清除浮动的方法有哪些？有额外标签法(隔墙法)、父级添加overflow属性方法、父级添加overflow属性方法、使用after伪元素清除浮动和使用双伪元素清除浮动四种方法。

1.额外标签法(隔墙法)

额外标签法是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>，或则其他标签br等亦可。

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

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

可以给父级添加： overflow属性为 hidden| auto| scroll 都可以实现，常用： overflow: hidden;

优点：代码简洁

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

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

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden; 
}   
.clearfix {
	*zoom: 1;
}   /* IE6、7 专有 */

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

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

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

优点：结构语义化正确

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

猜你喜欢：

CSS3相比CSS有哪些优势？

上一篇：css3渐变属性怎么使用？C3渐变用法教程 下一篇：Vue生命周期总共分为几个阶段?