? ?一般情況下是要清除浮動的，不然會影響下面標(biāo)簽的排版。浮動就是，打個比方說，你想一行放上兩個div，但是若是不加浮動，那么一行只能放一個div,加上浮動就可以放2個。另一方面就是若是標(biāo)簽加了浮動，在ie6里，margin的值會變成雙倍。若是要解決則需要加上display:inline

很多前端都是用.clearfix:after{ .....} ?和 .clearit{....}的組合 來清除浮動， 下面我來講解下這倆種的用法：

首先大家切頁面經(jīng)常用到浮動 float:left; float:right; 有浮動就需要清除他們，

after偽類由于受到ie6 7的不支持所以大多數(shù)時候，一般都需要定義一個固定的class名設(shè)置屬性clear的值both的div 兩者配合使用.

? ? ? ?*{ margin: 0; padding: 0}

? ? ? ?.left{ float: left;}

? ? ? ?.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //偽類清除

? ? ? ?.clearfix { zoom:1; }

.clearit { clear:both; height:0; font-size:0; overflow:hidden; } ?//設(shè)置class名清除

.main{ width: 1000px;}

.myRight,.myLeft{ width: 200px; height: 200px; background: #ddd;}

.myRight{ background: red}

///////////////////////////////////////////////第一種結(jié)構(gòu)

? ?

? ?

? ?

我是底部

1 ?此時不清除浮動 標(biāo)準瀏覽器 和ie8+ ?p標(biāo)簽會跑到 右側(cè)浮動div的旁邊 如圖：

IE6 IE7下

我們可以看出，標(biāo)準和ie8下 class名為main的div 沒被撐開，IE6 IE7下卻被浮動元素撐開了。

我們只需要解決 標(biāo)準 和 IE8+的浮動 就可以；現(xiàn)在我們給main 追加個class名如下：

? ?

? ?

? ?

我是底部

因為我們在css中設(shè)置了 .clearfix:after{..}所以浮動就不會繼承下去 此時給 .main加上背景{ background:blue };

我們發(fā)現(xiàn) ?標(biāo)準和 IE6+ ? 的 main 都已被撐開如下圖：

IE6下

標(biāo)準下：

//////////////////////////////////////////第二種結(jié)構(gòu) 此時需要用到 ?.clearit{ ...}

*{ margin: 0; padding: 0}

.left{ float: left;}

.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //偽類清除

.clearfix { zoom:1; }

.clearit { clear:both; height:0; font-size:0; overflow:hidden; } ?//設(shè)置class名清除

.main{ width: 1000px;}

.myLast,.myRight,.myLeft{ width: 200px; height: 200px; background: #ddd;}

.myRight{ background: red}

.myLast{ background:purple； height:140px}

////////此時浮動 元素 和 不需要浮動的元素 被包在同一個 父親下

? ?

? ?

? ?

IE6 下

元素繼承浮動跑到 浮動元素旁邊 而且 有自己的背景

IE8+ 和標(biāo)準

最后一個DIV沒繼承浮動 但是 元素內(nèi)的 內(nèi)容 被擋在浮動DIV后面，背景消失，鉆入浮動元素底下。

此時 給右側(cè)DIV加clearfix ?class名;如下圖：

? ?

? ?

? ?

標(biāo)準下和ie6+ 下 效果不變；

? ?

? ?

? ?

? ?

ie6+ 和標(biāo)準下 如下圖：

此時 ie6+和標(biāo)準下 顯示效果一致 ?浮動被清除；

這種簡單結(jié)構(gòu)的時候 也可給 最后一個div 設(shè)置 clear:both 這個屬性和值；也能得到此效果，

在結(jié)構(gòu)比較復(fù)雜 清除頻繁的時候 不如 在浮動元素后面 加一個

? ? ?

? ?