三个浮动的元素
<style type="text/css">
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}
</style>
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
有浮动.png
当外层DIV.outer 没有设置高度，如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，边框就不能被撑开，影响了布局，这种现象叫做浮动溢出。
这时需要清除浮动来达到理想效果：
清除浮动后的效果.png
清除浮动的几种方法：
1.clear:both
//div3后面新加一个div
<div class="clear"></div>
//css
.clear{clear:both; height: 0}
- 简单，浏览器兼容性好。
- 需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
2.父级div添加overflow属性
//给父级div outer设置属性
<div class="outer over-flow"> //这里添加了一个class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
//css
.over-flow{ overflow: auto; zoom: 1}
overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hidden和auto值来清除浮动，但不能使用visible值。
zoom:1是IE浏览器的专有属性，Firefox等浏览器不支持。zoom:1设置缩放比例为1，是为了兼容IE，一般和overflow一起用于清除浮动
3.父级div加:after方法
:after代表伪元素（不是伪类），是一个元素之后最近的元素。
利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用clear:after在元素内部增加一个类似于div.clear的效果。
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
- 相比增加一个空的div，:after方法文档结构更加清晰
4.给父级div也加上浮动
- 会使其整体浮动，有时候会影响布局，不推荐使用。
