首先要明白的是css 設計float屬性的主要目的是為了實現文字繞排 ，然而，這個屬性居然也成了建立多欄布局最簡單的方法。
浮動的元素會脫離常規的文件流，是因為當你浮動某個元素的時候，你是在要求瀏覽器把它往上放推，直到它碰到父元素（也就是body元素）的內邊界，自然位於它後面的元素不再認為浮動元素在文件流中位於它的前面了。
第一種：浮動元素後，該元素的父元素看不見它，所以為父元素新增overflow:hidden;強制它包圍浮動元素。
*overflow的作用一方面能使容器切掉超大子內容，另一方面就是能強制迫使父元素包含其浮動元素。
第二種：同時浮動父元素。因為浮動的父元素，不管子元素是否浮動都會緊緊包圍住它的子元素。
第三種：新增非浮動的清除元素。強者父元素包含其浮動的子元素，就是給父元素的最後新增乙個非浮動的子元素，然後再清除該子元素。（原因是，清除該子元素會讓該子元素位於浮動元素的下方，因為清除了，所以父元素會包裹該清除後的元素，而包含該元素，自然會包含它前面的浮動元素）
給父元素新增clearfix類：
.clearfix:after
清除浮動大總結
清除浮動 是每乙個 web前台設計師 必須掌握的機能。為什麼浮動這麼難？因為浮動會使當前標籤產生向上浮的效果，同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法在瀏覽...
清除浮動總結
父級元素沒有高度 內容需要從後台獲取時，不確定內容多少，此時父級元素不設定高度 子盒子浮動了。影響下面布局了，我們就應該清除浮動了 清除浮動的方式 優點缺點 額外標籤法 隔牆法 通俗易懂，書寫方便 新增許多無意義的標籤，結構化較差。父級新增overflow hidden 屬性 書寫簡單 溢位隱藏 父...
浮動與清除浮動總結
清除浮動 浮動 左浮動 右浮動 浮動會使塊元素脫離標準流，可以讓多個塊在同一行顯示，下方的標準流盒子會上浮到給了浮動的盒子下面 類名當布局需要多個塊級元素需要一行顯示的時候可以使用浮動 在開發過程中我們經常將其定義在common.css中，其定義如下 fl fr在同級多個元素需要浮動的時候，直接在類...