清除浮动

小&雄

于 2020-12-26 14:37:55 发布

阅读量489

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_46446238/article/details/111743108

版权

一、为什么需要清除浮动

由于父级盒子在很多情况下，不方便给高度，而子盒子浮动又不占有位置，最后导致盒子的高度为0，就会影响下面的标准流

清除浮动的本质：a.清除浮动元素造成的影响

b.如果父盒子本身有高度，则不需要清除浮动

c.清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了

高度，就不会影响下面的标准流

清除浮动的策略：闭合浮动（只限制在父元素）

清除浮动语法：选择器 {clear : 属性值;}

二、清除浮动的方法

（1）额外标签法也称隔墙法，是w3c推荐的做法

会在浮动元素末尾添加一个空标签，如

<style>
	.clear {
		clear : both;
	}
</style>
<body>
	<div class="damao">大毛</div>
	<div class="damao">大毛</div>
	<div class="clear"></div>
</body>

注意：必须为块级元素

（2）父级添加overflow属性

将其属性值设置为hidden、auto和scroll

注意：是给父级元素添加代码

优点：代码简洁

缺点：无法显示溢出的部分

（3）父级添加after（伪元素）属性

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

（4）父级添加双伪元素（在盒子的前后添加一堵墙，将他们闭合在父盒子内）

.clearfix:before,.clearfix:after {

  content: "";

  display: table;

}

.clearfix:after {

  clear: both;

}

.clearfix {

  *zoom: 1;

}

关注