清除浮动的几种方法

标签：实现   属性   问题   play   flow   overflow   解决   标签   添加   

什么时候用清除浮动：

父级没高度，子盒子浮动，影响到了下面布局，我们就应该清除浮动了。

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的方法：

①额外标签法(隔墙法)

通过在浮动元素末尾添加一个空的标签：

<div style=”clear:both”></div>

②父级添加overflow属性方法

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

③使用after伪元素清除浮动

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

④使用双伪元素清除浮动

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1; /* 由于IE6-7不支持:after，使用zoom: 1触发hasLayout */
}

清除浮动的几种方法

标签：实现   属性   问题   play   flow   overflow   解决   标签   添加   

原文地址：https://www.cnblogs.com/kawayi/p/14425626.html