清除浮动的4种方式

清除浮动可以通过两大方面进行
父元素：
1）浮动元素的父元素设置高度
2）浮动元素的父级元素设置overflow:hidden;
3）浮动元素的父元素使用::after {display:block;content:"";clear:both;}
兄弟元素：
在使用浮动的最后一个兄弟元素后面，添加一个标签，该标签使用clear:both;

方式一:

给父元素高度

<div class="wrapper_one">
	<div></div>
	<div></div>
	<div></div>
</div>

.wrapper_one{
	height: 100px;  //给父元素高度
}
.wrapper_one div{
	height: 100px;
	width: 200px;
	background-color: teal;
	float: left;
}

方式二:

给父元素设置overflow:hidden;

<div class="wrapper_two">
	<div></div>
	<div></div>
	<div></div>
</div>

.wrapper_two{
	overflow:hidden;  //给父元素设置overflow:hidden;
}
.wrapper_two div{
	height: 100px;
	width: 200px;
	background-color: #ccc;
	float: left;
}

方式三:

浮动元素的父元素使用::after{clear:both;content:’’;display:block}

<div class="wrapper_three">
	<div></div>
	<div></div>
	<div></div>
</div>

.wrapper_three::after{
	display:block;
	content:"";
	clear:both;
}
.wrapper_three div{
	height: 100px;
	width: 200px;
	background-color: #333;
	float: left;
}

方式四:

在使用浮动的最后一个兄弟元素后面，添加一个块级标签（不是块级可以设置成display:block），该标签使用clear:both;
此处不使用空标签div，是因为这里选中了.wrapper_four下的所有div浮动，所以可以用span替换

<div class="wrapper_four">
	<div></div>
	<div></div>
	<div></div>
	<span class="test"></span>
</div>

.wrapper_four div{
	height: 100px;
	width: 200px;
	background-color: #ededed;
	float: left;
}
.test{
	display:block;
	clear:both;
}