关于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部分：

CSS部分：

很明显在保持同样html结构的情况下，实现两栏布局可以有多种CSS方案实现（左栏定宽），主要方向是用浮动或不用浮动，右栏定宽或者不定宽：

Qzone、朋友网、Facebook都给左栏浮动，唯一不同的是右栏的写法，Qzone给右栏定宽并且浮动，而朋友网和Facebook则并没有给右栏定宽也未浮动，而是利用了创建BFC并且为低版本IE触发hasLayout的原理让右栏自适应宽度。

Yahoo和Google两栏都未用浮动，唯一不同的是Yahoo用了绝对定位的方法，而谷歌用了inline-block，Google已经宣布旗下一些产品放弃对IE8 的支持，所以Google可以大胆的使用inline-block去实现布局，不用去为其他低版本浏览器写一大堆的hack。

说了CSS浮动，现在说说清除浮动的几种方法

1. 采用一个HTML标签，以及css的clear属性，来手工清理浮动；
2. 采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；
3. 采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；
4. 采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；
5. 使用 TABLE 以及 TD 标签作为浮动元素容器；
6. 采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；
7. 在 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