CSS利用浮動和清除浮動進行佈局
「內容簡介」CSS有三種基本定位方式：正常流（static），浮動（float），絕對定位（absolute、fixed）。 HTML元素預設採取正常流的方式進行佈局，而浮動是HTML佈局中最常用的定位方式。
下面先探討浮動定位的行為，然後介紹一個需要清除浮動的場景，以及幾種替代方案。
浮動
浮動元素會向左/右偏移，直至外邊界碰到容器或另一個元素的邊緣。 浮動會使得元素脫離文件流，後面元素進行佈局時，前面的浮動元素就像不存在一樣。
如果右側沒有足夠空間，浮動元素就會下墜，直到有足夠的空間（折行）。 如果浮動元素有著不同的高度，那麼可能在下墜過程中卡在某個位置。
清除浮動
雖然浮動也會使元素脫離文件流，但與絕對定位不同，後續元素仍然會為浮動元素騰出空間。 這可以導致文字環繞的效果，這也是浮動的初衷之一。
如果希望某一行停止環繞，可以為該行設定清除浮動（clear）。它有四種值：left, right, both, none，表示哪個方向不應當與浮動元素相鄰。
CSS渲染器通過新增margin-top來達到這個效果。例如：
浮動容器
如果你寫前端已經有一段時間了，那麼一定會發現浮動元素不佔據父容器的空間。 這使得父容器大小為零，當然父容器的邊框和背景就會失效：
但是有沒有發現我們為任何一個元素清除浮動都打不到效果。這時我們需要一個額外的空元素， 並設定clear:both：
通過額外的元素我們達到了效果，為此Bootstrap可以提供了clearfix類。 Bootstrap中這個空元素可以這樣寫：
<div class="clearfix"></div>
替代方案
讓容器也浮動
但強迫症患者一定不喜歡這個額外的div，一個替代方式是將容器也浮動起來。 當然這會造成後續元素的佈局也需要浮動，所以有些網站裡幾乎所有元素都在浮動！
設定容器overflow
將容器的overflow設定為auto或hidden也可以達到效果。 但設定overflow有時候會產生我們不希望的行為。
CSS偽元素
為了不要那個額外的空元素，我們可以用CSS來為容器新增一個偽元素：
.clear:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}在IE6以下的瀏覽器中，還需要設定
height: 1%（IE BUG）。
其實和空元素的原理是一樣的...只是這個元素是執行時產生的，不過程式碼還是整潔了。 之所以display:block，是因為clear的原理是自動新增margin-top， 而該屬性對行內元素是不起作用的。