關於浮動的基礎知識，這裡先引用w3school的一段介紹，在此基礎上我會新增一些註記和補充：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
css 浮動
請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從檢視中消失。
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：
css float 屬性
在 css 中，我們通過 float 屬性實現元素的浮動。
行框和清理
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。
因此，建立浮動框可以使文字圍繞影象：
要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。
為了實現這種效果，在被清理的元素的上外邊距上新增足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
這是乙個有用的工具，它讓周圍的元素為浮動元素留出空間。
div>這種情況下，出現了乙個問題。因為浮動元素脫離了文件流，所以包圍和文字的 div 不佔據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
不幸的是出現了乙個新的問題，由於沒有現有的元素可以應用清理，所以我們只能新增乙個空元素並且清理它。
.news
.news
img
.news
p.clear
class="news">
class="clear">div>
div>
這樣可以實現我們希望的效果，但是需要新增多餘的**。常常有元素可以應用 clear，但是有時候不得不為了進行布局而新增無意義的標記。
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
div>這樣會得到我們希望的效果。不幸的是，下乙個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是站點的頁尾）對這些浮動進行清理。這有助於減少或消除不必要的標記。
事實上，w3school 站點上的所有頁面都採用了這種技術，如果您開啟我們使用 css 檔案，您會看到我們對頁尾的 div 進行了清理，而頁尾上面的三個 div 都向左浮動。
筆者註記：
對於行內標籤，比如span，clear屬性不會起到任何效果。clear屬性的功能僅僅是解決塊（block)級標籤跟在浮動塊之後會忽略浮動塊所佔位置的問題。
用這種浮動塊可以使用div來構建分欄布局，也就是上文說的那種多個div浮動，然後用頁尾clear:both的方式進行分欄。
如果你的頁面使用css浮動之後擠壓在一起，試試clear屬性。
span可以讓文字中的一段變成浮動的，放置到左側或者右側，前後的文字會銜接置於另一邊。這可以用來建立文字首字母放大佔多行的效果。
除了用span，還可以用:first-letter偽元素來設定首字母放大的效果.
li元素設定為float:left;display:inline可以結合ul建立水平選單.
width:100%的float元素會佔據一整行的空間，這個特點可以讓li全都float的ul占用一整行而不是被文字環繞。
p元素跟在float元素之後的情況，文字也會環繞float元素，而不是另起一行。
CSS 清浮動詳解
使元素脫離文件流，按照指定方向發生移動，遇到父級邊界或者相鄰的元素停下來。脫離文件流 此時浮動元素在文件中不佔位置，飄了起來 1.塊元素在一行顯示 2.內聯元素支援寬高 3.預設內容撐開寬度 4.脫離文件流 5.提公升層級半層 只能夠放元素本身，這個元素裡的內容會被擠出來 6.父元素的高度無法被撐開...
CSS浮動詳解（1）
首先要知道，div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流。如下圖 可以看出，即使div1的寬度很小，頁面中一行可以容下div1和div2，div2也不會排在div1後邊，因為div元素是獨佔一行的。注意，以上這些理論，是指標準流中的div。無論多麼複雜的布局，其基本出發點均是 ...
css浮動布局詳解
浮動布局簡介 當元素浮動以後可以向左或向右移動，直到它的外邊緣碰到包含它的框或者另外乙個浮動元素的邊框為止。元素浮動以後會脫離正常的文件流，所以文件的普通流中的框就變現的好像浮動元素不存在一樣。類似於inline block 區別 第乙個 就是關於橫向排序的時候，float可以設定方向而inline...