如何清除浮动的四种方法

一只努力的笨笨熊

已于 2022-11-29 14:34:23 修改

阅读量461

点赞数

分类专栏：前端文章标签： css css3 html

于 2022-11-29 14:33:35 首次发布

本文链接：https://blog.youkuaiyun.com/BBQ__ZXB/article/details/128097402

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了清除浮动的重要性，即修复因浮动元素导致的父盒子高度塌陷问题。讨论了闭合浮动的概念，旨在限制浮动影响范围。文中列举了三种清除方法：额外标签法、父级添加overflow属性以及使用伪元素。每种方法都有其优缺点，如额外标签法简洁但可能增加结构复杂性，而overflow属性和伪元素方法则更高效但可能涉及浏览器兼容性问题。

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

清除浮动的本质

清除浮动元素脱离标准流造成的影响

清除浮动的策略

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外部的其他盒子

清除方法

额外标签法也称隔离法，是W3C推荐的做法
在浮动元素末尾添加一个空的标签。

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

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

注意：新标签必须是块级元素

父级添加overflow属性
可以给父级div中添加overflow属性，将其属性值设置为hidden，auto或scroll。
父级添加after伪元素
：after方式是额外标签法的升级版，也是给父元素添加

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

父级添加双伪元素

.clearfix:before,.clearfix :after {
	icontent : " ";
	display:table;
}

.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}