css浮动可以实现很多功能，比如多栏布局，多元素的内联排列等等，在同时也带来了一些问题，浮动后就脱离了原来的文档流，进而就会造成父元素塌陷。
目前解决浮动造成的这个问题主要有一下几种方案：
1. clear:both清除浮动
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div style="clear:both"></div>
</div>
.container {
border: 1px solid red;
}
.box {
height: 100px;
width: 100px;
margin: 20px;
background: green;
float: left;
}
2. 块状格式化上下文清除浮动
<b>什么是格式化上下文</b>
* 可以包含浮动元素
* 不被浮动元素覆盖
* 阻止父子元素的margin折叠
<b>如何创建格式化上下文</b>
* 根元素
* 浮动元素（float不是none）
* 绝对定位元素（position为fixed或absolute）
* display取值为inline-block,table-cell,table-caption,flex,inline-flex之一
* overflow不是visible的元
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
border: 1px solid red;
/*display:table;*/
float:left;
/*overflow: hidden;*/
/*position: absolute;*/
}
.box {
height: 100px;
width: 100px;
margin: 20px;
background: green;
float: left;
}
3. 伪类清楚浮动
<div class="clearfix">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
总结
常用的以上三种清楚浮动的办法，推荐使用第三种，兼容性比较好，并且没有添加格外的一些类，可移植性比较好
