关于CSS浮动以及驱除浮动的几种方法
关于CSS浮动以及清除浮动的几种方法
CSS部分：
众所周知，CSS浮动在日常页面运用中起到非常重要的作用。
例如，我们可以利用浮动来实现多栏布局等。如下图，Qzone利用浮动来实现双栏布局的示例：
它的页面代码是这样的（主要）：
HTML部分：
CSS部分（主要）：
.col_menu { float: left; position: relative; width: 170px; }
.col_main { border-bottom-right-radius: 5px; border-top-right-radius: 5px; float: left; width:789px;}
不难看出，Qzone是通过给左右栏定宽并且浮动来实现的。
对比其他一些网站实现是如何实现两栏布局：
HTML部分：
很明显在保持同样html结构的情况下，实现两栏布局可以有多种CSS方案实现（左栏定宽），主要方向是用浮动或不用浮动，右栏定宽或者不定宽：
Qzone、朋友网、Facebook都给左栏浮动，唯一不同的是右栏的写法，Qzone给右栏定宽并且浮动，而朋友网和Facebook则并没有给右栏定宽也未浮动，而是利用了创建BFC并且为低版本IE触发hasLayout的原理让右栏自适应宽度。
Yahoo和Google两栏都未用浮动，唯一不同的是Yahoo用了绝对定位的方法，而谷歌用了inline-block，Google已经宣布旗下一些产品放弃对IE8 的支持，所以Google可以大胆的使用inline-block去实现布局，不用去为其他低版本浏览器写一大堆的hack。
说了CSS浮动，现在说说清除浮动的几种方法
- 采用一个HTML标签，以及css的clear属性，来手工清理浮动；
- 采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；
- 采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；
- 采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；
- 使用 TABLE 以及 TD 标签作为浮动元素容器；
- 采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；
- 在 IE 6/7 的标准文档模式中设置 “width/height/zoom” 等样式来自动清理浮动。
清除浮动根本方法归类
1.使用css 1就提供的用来清除浮动的样式 clear，如：方法 1，方法 2
2.创建BFC，如：方法,3,4,5,6,7
3.触发hasLayout 如：方法6,7
常用方法
方法1,3,6,7
参考地址：
http://www.w3cfuns.com/article-945-1.html
http://www.w3help.org/zh-cn/casestudies/001
http://www.w3help.org/zh-cn/causes/RM8002