本文所討論場景均由以下代碼表示。

HTML結構：

<div class="outer">  <div class="inner"></div></div>

CSS樣式：

.outer{  width:300px;  border: 1px solid #ccc;  background:red;}.inner{  width:100px;  height:100px;  background: blue;  float:left;}

以上代碼顯示結果為

期待的顯示結果為

分析：由上圖看出，父元素為被撐開，高度為0，所以看不到其背景色。

（我理解的浮動：游泳池底有一個大小height可伸縮的.outer，里面放著一個.inner，有一天你對.inner設置了浮動，它就飄到游泳池的水面了（當然，它仍在.outer占據位置，這里僅僅用來理解父元素縮小的原因，不適用于浮動其他特性的理解），于是.outer就癟下去了，因為沒人撐開它了）

下面進入正題，討論以下常見的四種清除浮動的方法，下列均能得到期待的顯示結果。

（1）添加塊級新元素，并設置為clear：both

HTML結構：

<div class="outer">  <div class="inner"></div>  <div class="new"></div></div>

CSS樣式：

.new{  clear:both;}

原理分析：clear：both屬性會防止指定了clear的元素兩邊存在浮動元素。由于.new左右均不能有浮動元素，所以它必須在.inner下面找到一個位置，所以.outer就被撐開了。注意：新添加的.new一定要為塊級元素，不然.new就不會換行在.inner下面找位置，而是在inner右邊找位置了。

優點：易理解，不容易受其他屬性設置影響

缺點：增加了dom節點數

（2）父元素定義 overflow: auto

CSS樣式：

.outer{  width:300px;  border: 1px solid #ccc;  background:red;  overflow:auto;}

原理分析：應用了overflow：auto的元素，將會擴展它的大小以包圍它所包含的元素，而浮動元素仍在父元素中占據位置，因此，.outer會擴展其大小以包含.inner。

優點：代碼量少

缺點：易受影響。比如若父元素設置了高度，當子元素高度超過父元素時，會出現滾動條。

（3）對父元素添加偽類：after

.outer:after{  content:"";  display: block;  clear:both;}

原理分析：這種方法原理與第一種方法原理類似，都是通過添加一個元素來撐開父元素（content:""; 相當于一個空內聯元素，display: block;將此空元素設為以塊級元素顯示，clear:both; 防止其左右有浮動元素）。不同的是，偽類不占據dom元素節點，這也是這種方法相比方法一的優點。

優點：不占據dom節點，適用性廣

缺點：代碼量多，據說對seo不友好（待求證）

（4）對父元素也設置float

.outer{  width:300px;  border: 1px solid #ccc;  background:red;  float:left;}

原理分析：float屬性有一個特性，浮動元素會延伸，從而包含其所有后代浮動元素（css權威指南P299），因此.outer會延伸其高度，以包含.inner。

優點：簡單易行

缺點：適用性不強，對父元素設置float可能會影響整體布局。

總結：綜合來看，第三種通過偽類來清除浮動的方法比較好。不過，實際使用時，還是要根據實際場景，綜合考慮選擇適用的清除浮動方法。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！