清除浮动的3个方法

1、使用 overflow 属性清除浮动

.fahter {
	width: 300px;
	border: 1px solid #ccc;
	overflow: hidden; /*第一种：BFC*/
	display:float-root; /*第二种：推荐使用这一种，因为如果该元素需要滚动的话，overflow: hidden将不能满足*/
}

.son {
	width: 200px;
	height: 200px;
	background-color: #ccc;
	float: left;
}
<div class="fahter">
     <div class="son"></div>
</div>

2、使用空标签(必须是块元素)清除浮动（不推荐）

.fahter {
	width: 300px;
	border: 1px solid #ccc;
}

.son {
	width: 200px;
	height: 200px;
	background-color: #ccc;
}
.son-clear {
	clear: both;
}

<div class="fahter">
     <div class="son"></div>
     <div class="son-clear"></div>
</div>

3、使用伪类清除浮动

.fahter {
	width: 300px;
	border: 1px solid #ccc;
}
.fahter::after {
	content: '';
	display: block; /*必须是块元素*/
	clear: both;
}

.son {
	width: 200px;
	height: 200px;
	background-color: #ccc;
}

<div class="fahter">
     <div class="son"></div>
</div>