歡迎來到位元魔典
關於浮動的基礎知識，這裡先引用w3school的一段介紹，在此基礎上我會新增一些註記和補充：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從檢視中消失。
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：
在 css 中，我們通過 float 屬性實現元素的浮動。
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。
因此，建立浮動框可以使文字圍繞影象：
要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。
為了實現這種效果，在被清理的元素的上外邊距上新增足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
這是乙個有用的工具，它讓周圍的元素為浮動元素留出空間。
.news .news img .news p some text這種情況下，出現了乙個問題。因為浮動元素脫離了文件流，所以包圍和文字的 div 不佔據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
不幸的是出現了乙個新的問題，由於沒有現有的元素可以應用清理，所以我們只能新增乙個空元素並且清理它。
.news .news img .news p這樣可以實現我們希望的效果，但是需要新增多餘的**。常常有元素可以應用 clear，但是有時候不得不為了進行布局而新增無意義的標記。.clearsome text
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news .news img .news p some text這樣會得到我們希望的效果。不幸的是，下乙個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是站點的頁尾）對這些浮動進行清理。這有助於減少或消除不必要的標記。
事實上，w3school 站點上的所有頁面都採用了這種技術，如果您開啟我們使用 css 檔案，您會看到我們對頁尾的 div 進行了清理，而頁尾上面的三個 div 都向左浮動。
筆者註記：
css浮動布局
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...
css浮動布局
清除浮動 形狀浮動 使用浮動可以控制相鄰元素間的排列關係。float left 向左浮動 float right 向右浮動 float none 不浮動 沒有設定浮動的塊元素是獨佔一行的。浮動是對後面元素的影響，第二個元素設定浮動對第乙個元素沒有影響。表示第乙個元素div.first of type...
CSS浮動布局
預設文件流就是對頁面布局不加任何修飾，元素自動的布局方式，其特點有 1 元素在頁面中的顯示順序與元素在 現的順序是一致的。2 塊級元素獨佔一行空間，寬度預設為父級的100 高度由其內容高度所決定。3 行內元素與其他元素共享一行空間，寬高由其內容所決定。但是預設文件流往往不能滿足我們的布局需求，我們可...