清除浮动有两种方法：
一、设置 width:100%(或固定宽度) 和 overflow:hidden
.parent {
border: 4px solid black;
width: 200px;
overflow: hidden; /*这样可以清除浮动*/
}
.child {
width: 200px;
height: 200px;
float: left;
background-color: #8bc528;
}
<div class="parent1">
<div class="child1"></div>
</div>
设置 overflow:hidden 可以清除浮动的原因:
正常父元素包含浮动子元素，父元素的高度确实为0。但是父元素
overflow:hidden;后，首先会计算height: auto;的真实高度，由于其触发了BFC，需要包含子元素，所以高度不是0，而是子元素高度。这时overflow:hidden;才起到隐藏作用，不过父元素高度足够大，所以子元素没有被隐藏。
CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？
二、使用 clear:both; 或 clear:left; 或 clear:right;
.clearfix {
display: inline-block;
}
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
将上面的 .clearfix 样式应用到需要清除浮动的元素的父元素上。
