浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
为什么要清除浮动？
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线
clear：both：在左右两侧均不允许浮动元素。本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来
clear:left | right | both | none | inherit：元素的某个方向上不能有浮动元素
如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。
高度塌陷：如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零
解决方法：
1.父级div定义伪类：after和zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
<div><div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
</div>
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
2.使用before和after双伪元素清除浮动
<div><div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
</div>
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after, .clearfloat:before {content: ""; display: table;}
.clearfloat:after {clear: both;}
.clearfloat {*zoom: 1;}
</style>
3.在结尾处添加空div标签clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
缺点：如果页面浮动布局多，就要增加很多空div，让人感觉很不爽, 缺点：添加无意义标签，语义化差
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px; }
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
4.父级div定义height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px; }
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
5.父级div定义overflow:hidden 通过触发BFC方式，实现清除浮动
内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏 建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px; width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
6.父级div定义overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
缺点：内部宽高超过父级div时，会出现滚动条。 建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px; width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
7.父级div也一起浮动
原理：所有代码一起浮动，就变成了一个整体 优点：没有优点
缺点：会产生新的浮动问题。 建议：不推荐使用，只作了解。
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
8.父级div定义display:table
原理：将div属性变成表格 优点：没有优点 缺点：会产生新的未知问题 建议：不推荐使用，只作了解
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
9.结尾处加br标签clear:both
<div class="div1"><div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat"/>
</div>
<div class="div2">
div2
</div>
<style type="text/css">
.div1{background:#000080;border:1px solid red;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
