一、為什麼要清除浮動
浮動會引起父容器塌陷，導致頁面配置出錯等問題。
例子：
<body><div class="parent_Div"><div class="float_Div">float left float left float left float left.....</div><div class="child_two_Div">child_two_Div child_two_Div child_two_Div......</div></div><div class="bottom_Div">bottom_Div bottom_Div bottom_Div bottom_Div.......</div></body>
樣式：
.parent_Div {width: 500px;border: 3px solid black;}.float_Div {width: 100px;height: 100px;border: 2px dotted #C7254E;color: red;margin: 4px;float: left;}.bottom_Div {width: 500px;height: 100px;margin: 5px 0;border: 2px dotted black;}.child_two_Div {color: aqua;border: 2px solid aqua;}
Chrome 渲染結果：
這很顯然不是我們想要的效果，因為它可能存在如下問題：
1、文本是圍繞著浮動元素（.float_Div）排版的，然而，我們想要的結果是（.child_two_Div） 元素的文字流向在浮動元素的下方，並不希望（.child_two_Div）兩邊有浮動元素存在。
2、浮動元素（.float_Div）排版超出了其父元素，父元素高度出現塌縮。
3、浮動元素（.float_Div）甚至影響到了其父元素（.parent_Div）的兄弟元素（.bottom_Div）的排版。這是因為浮動元素脫離了文檔流，.bottom_Div在計算元素位置時會忽略其影響，緊接著上一個元素的位置繼續排列。
瞭解了存在的問題，下面就介紹清除浮動的方法：
二、清除浮動的方法
1、使用clear樣式
給需要清除浮動的元素添加樣式：
.child_two_Div {color: aqua;border: 2px solid aqua;clear: left; /*添加清浮動的樣式*/}
渲染效果（clear的值為both也有相同的效果）：
通過上面的樣式，保證了（.child_two_Div）元素的左邊沒有浮動元素，同時，父元素的高度也被撐起來了，其兄弟元素的渲染也不再受到浮動的影響。
但是，如果我們把HTML中的（.child_two_Div）元素和（.float_Div）元素交換一下位置呢。
<body><div class="parent_Div"><div class="child_two_Div">child_two_Div child_two_Div child_two_Div...</div><div class="float_Div">float left float left float left float left...</div></div><div class="bottom_Div">bottom_Div bottom_Div bottom_Div bottom_Div...</div></body>渲染結果：
給 .child_two_Div 元素使用清除浮動樣式：
.child_two_Div {color: aqua;border: 2px solid aqua;clear: left; /*添加清浮動的樣式*/}
結果：
從渲染效果可以看出，調換位置之後，無論.child_two_Div元素是否應用清除浮動樣式，渲染結果都是上面這個樣子。
這是因為，.child_two_Div元素的位置確定了，於是浮動元素就緊接著.child_two_Div元素下方渲染在父元素的左側。然而，父元素的高度沒有被撐起來，沒有將浮動影響‘內化’，導致浮動影響了接下來元素的排版。
所以，看來，為達到撐起父元素高度的目的，使用clear清除浮動的方法還是有一定的適用範圍，因此，我們需要更加可靠、通用的辦法。
2、在父元素結束標籤之前插入清除浮動的區塊層級元素
HTML結構如下：
<body><div class="parent_Div"><div class="child_two_Div">child_two_Div child_two_Div child_two_Div...</div><div class="float_Div">float left float left float left float left...</div> <div class="more"></div></div><div class="bottom_Div">bottom_Div bottom_Div bottom_Div bottom_Div...</div></body>
給新增元素添加樣式：
.more{clear: both;}
渲染結果：
此方法，和使用clear清除浮動，撐起父元素高度原理一樣。
3、利用虛擬元素
HTML結構如下，給.parent_Div元素添加一個類名clearfix
<body><div class="parent_Div clearfix"><div class="child_two_Div">child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div</div><div class="float_Div">float left float left float left float left</div></div><div class="bottom_Div">bottom_Div bottom_Div bottom_Div bottom_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div</div></body>
樣式表如下：
.clearfix:after{content:'.';height: 0;clear: both;display: block;}
該樣式在父元素的最後添加一個:after虛擬元素，通過清除虛擬元素浮動來撐起父元素的高度。
該元素的display值為block，表示它是一個不可見的區塊層級元素（有的地方使用tabel，因為tabel也是塊元素）
渲染結果：
4、使用overflow清除浮動
HTML結構如下：
<body><div class="parent_Div"><div class="child_two_Div">child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div</div><div class="float_Div">float left float left float left float left</div></div><div class="bottom_Div">bottom_Div bottom_Div bottom_Div bottom_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div child_two_Div</div></body>
樣式表：
.parent_Div {width: 500px;border: 3px solid black;/*使用overflow清除浮動*/overflow: auto;}
渲染結果：
僅僅在父元素上添加一個值為auto的overflow屬性，就能達到撐起父元素高度的效果，將浮動元素包裹在內。其實這裡的overflow值，還可以是除visible之外的任何值，都能達到撐起父元素高度，清除浮動的效果。不過，有的值會有副作用，比如，scroll值會導致捲軸始終可見，hidden值會導致超出邊框的值不可見等。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
