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

HTML結構：

CSS樣式：

以上代碼顯示結果為

期待的顯示結果為

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

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

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

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

HTML結構：

CSS樣式：

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

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

缺點：增加了dom節點數

（2）父元素定義 overflow: auto

CSS樣式：

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

優點：代碼量少

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

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

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