一、如何清除浮动
1.1clear:both方法
在设置了浮动的元素的后边紧接着设置一个<div style="clear:both;"></div> 或 <br style="clear:both;"/>，该方法兼容性强，但是浪费标签。
1.2.overflow + zoom方法
给受浮动影响发生高度塌陷的父元素设置.fix{overflow:hidden; zoom:1;}。
这种清除浮动的方法代码简洁，涵盖所有浏览器，但是overflow:hidden的设置导致里面的元素不能设置负margin,或是负的绝对定位，会被裁掉，有一定的局限性。
1.3.after + zoom方法
.clearfix{zoom:1;}
.clearfix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
zoom是 IE的专有属性，可以触发IE的haslayout属性。因为IE6和IE7不认识after伪元素,所以这个zoom:1;是为了兼容IE6和IE7的。
这里content:"clear"内的内容其实可以为任何值，也可以为空。
1.4.更简洁的after + zoom方法
clearfix:after { content: ''; display: block; clear: both; }
.clearfix { *zoom: 1; }
二、IE7及以下浏览器使用float导致的怪异现象
2.1.含clear的浮动元素包裹不正确的问题
关键html代码：
<body>
<div>第一个div的文本...</div>
<div>第二个div的文本...</div>
</body>
关键css样式代码：两个div都设置左浮动，同时也都清除浮动。
div {float: left; clear: both ;}
先看在其他浏览器下的表现:表现正常，第一个div的宽度适应文本长度，第二个div的宽度等于body的宽度。
再看在IE7下的表现：第一个div的宽度适应文本长度没错，第二个div的宽度却莫名比body短了许多。
2.2.浮动元素倒数2个莫名产生垂直间距
关键html代码：
<body>
<div>
<p>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
</p>
</div>
</body>
关键css样式代码：
div{width: 100px;}
p {margin-right: 1px; }
span { border: 1px solid #aaa; float: left; width: 120px; }
其他浏览器下表现正常：
IE7及以下浏览器显示如下图，最后两个元素间产生了垂直间距（若去掉p标签样式则显示正常）。
2.3.最后一个浮动元素发生字符重复
关键html代码：
<body>
<div>
<p>
<span>A</span>
<span>B</span>
<span>C</span>
</p>
</div>
</body>
关键css样式代码：
div { width: 100px; }
p { margin-right: 1px;}
span { float: left;width: 120px;}
其他浏览器下表现正常：
IE7及以下浏览器出现了两个C。（同样，去掉p标签的样式则正常显示。）
2.4.浮动元素与文本不在同一行的问题
关键html代码：
<body>
<div>
左侧标题
<span>右浮动</span>
</div>
</body>
关键css样式代码：
div { border: 1px solid #bbb; background-color: #eee; }
span { float: right; }
其他浏览器下正常显示：
IE7下居然不在同一行：
三、float与JavaScript
float是javascript中的关键字，不能使用obj.style.float="left";来设置对象的float属性。
IE浏览器：obj.style.styleFloat = "left";
其他浏览器：obj.style.cssFloat = "left";
主要参考文章及视频
CSS float浮动的深入研究、详解及拓展(一)
CSS float浮动的深入研究、详解及拓展(二)
http://www.imooc.com/video/2887
