方法：首先使用“父元素:after{content:'';display:block;}”語(yǔ)句在父元素底部插入并顯示一個(gè)空的元素塊；然后給該元素塊添加“clear:both;”樣式即可清除所有浮動(dòng)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)有哪些方法？

1、對(duì)元素進(jìn)行了浮動(dòng)（float）后，該元素就會(huì)脫離文檔流，浮動(dòng)在文檔之上。在CSS中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。

float主要流行與頁(yè)面布局，然后在使用后沒(méi)有清除浮動(dòng)，就會(huì)后患無(wú)窮。

先看實(shí)例：

<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;} .div1{ width:80px; height:80px; background:#f00; float:left; } .div2{ width:80px; height:80px; background:blue; float:left; } .div3{ width:80px; height:80px; background:sienna; float:left; }

如上圖所示，是讓1、2、3這三個(gè)元素產(chǎn)生浮動(dòng)所造成的現(xiàn)象。

下面看一下，如果這三個(gè)元素不產(chǎn)生浮動(dòng)，會(huì)是什么樣子?

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;} .div1{ width:80px; height:80px; background:#f00; /*float:left;*/ } .div2{ width:80px; height:80px; background:blue;/* float:left; */} .div3{ width:80px; height:80px; background:sienna;/* float:left;*/ }

如上圖所示，當(dāng)內(nèi)層的1/2/3元素不浮動(dòng)，則外層元素的高是會(huì)被自動(dòng)撐開(kāi)的。

所以當(dāng)內(nèi)層元素浮動(dòng)的時(shí)候，就出現(xiàn)以下影響：

背景不能顯示；邊框不能撐開(kāi)；margin設(shè)置值不能正確顯示。

2、清除浮動(dòng)—–:after方法。（注意：作用于浮動(dòng)元素的父親）

原理：利用:after和:before來(lái)在元素內(nèi)部插入兩個(gè)元素塊，從而達(dá)到清除浮動(dòng)的效果。其實(shí)現(xiàn)原理類(lèi)似于<div style="clear:both;
"></div>方法，只是區(qū)別在于:clear在html中插入一個(gè)div.clear標(biāo)簽，而outer利用其偽類(lèi)clear:after在元素內(nèi)部增加一個(gè)類(lèi)似于div.clear的效果。

.outer { zoom:1; } /*為了兼容性，因?yàn)閕e6/7不能使用偽類(lèi)，所以加上此行代碼。*/ .outer:after { content:'';clear:both;display:block;width:0;height:0;visibility:hidden; }

其中clear:both;指清除所有浮動(dòng)；content:' . '；display:block; 對(duì)于FF/Chrome/opera/IE8不能缺少，其中content()取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來(lái)，這樣才能實(shí)現(xiàn)清除浮動(dòng)。

利用偽元素，就可以不再HTML中加入標(biāo)簽。

:after 的意思是再.outer內(nèi)部的最后加入為元素:after，

首先要顯示偽元素，所以display:block，

然后為偽元素加入空內(nèi)容，以便偽元素中不會(huì)有內(nèi)容顯示在頁(yè)面中，所以， content:""；

其次，為使偽元素不影響頁(yè)面布局，將偽元素高度設(shè)置為0，所以width:0， height:0，（可省略）

最后，要清除浮動(dòng)，所以，clear:both。

tips:

content 屬性與 :before 及 :after 偽元素配合使用，來(lái)插入生成內(nèi)容。

（學(xué)習(xí)視頻分享：css視頻教程）