文章**：
雖然浮動可以便於頁面布局，但同時會產生一些問題，也就是常說的***。浮動元素最常見的缺陷是：父元素的高度塌陷和影響兄弟元素的位置。
首先，看看父元素的高度塌陷。假設有乙個容器，其中兩個子元素，乙個子元素向左浮動，乙個子元素向右浮動。**如下：
box2
圖5-29 浮動導致容器高度塌陷
這種塌陷會影響、甚至破壞布局，如果父元素沒有邊框，也不包含任何可見背景，這個問題就很難被注意到，但它卻是乙個很重要的問題。
再來看看浮動元素如何影響兄弟元素的位置。當容器的高度為 auto，且只包含浮動元素時，如果浮動元素的高度不相同，而剩餘空間足夠容納後面的元素時，後面的元素就會上跳到剩餘的空間。**如下：
aside
footer
上述的布局為兩欄布局，主欄向左浮動，側欄向右浮動，並且側欄的高度小於主欄的高度。頁尾便會上跳到側欄的剩餘空間。如圖 5‑30 所示：
圖5-30 浮動使相鄰元素上跳
很顯然，無論是高度塌陷，還是影響兄弟元素的位置，都不是使用浮動的目的。浮動只是為了改變元素的布局，卻造成了不必要的影響。因此，需要清除浮動帶來的影響。
css中，把清除浮動影響所進行的處理，叫做清理浮動（或清除浮動）。一般有兩種處理思路：使用 clear屬性和讓容器建立乙個bfc。
每種思路中都包含多種方法，但並不是每一種方法都盡善盡美，接下來簡單介紹這些方法的原理及適用場合，可以根據實際情況，選擇合適的方法。
使用 clear屬性
css中的 clear屬性，用來規定在元素的哪一側不允許出現浮動元素，可選值有 none | left | right | both，預設值為 none，表示不清除，左右兩側均允許出現浮動元素。left 表示清除左側，在左側不允許出現浮動元素；right 表示清除右側，在右側不允許出現浮動元素；both 表示清除兩側，左右兩側均不允許出現浮動元素。
1）使用帶clear屬性的空元素
這也是w3c推薦使用的方法，首先在css中定義乙個清理的 class，然後在浮動元素的後面，使用乙個空元素
或 。如：
.clear
box1
box2
這種方法的優點是簡單、**少、瀏覽器相容性好。但是，需要新增無語義的html元素，違背了表現和內容相分離的原則，**不夠優雅，增加了後期維護的難度。
2）借用鄰接元素處理
什麼都不做，給浮動元素後面的那個元素新增 clear屬性。假如在浮動元素後面有乙個 p 元素，可以為 p 元素新增 clear屬性，來間接清除浮動。如：
box1
box2
如果你很明確的知道接下來的元素是什麼，這個方法很不錯，它不需要 hack，不新增額外的元素。但是，使用這種方法，必須確保浮動元素後面確實有元素。如果沒有元素，巧婦難為無公尺之炊，也沒有辦法。
3）使用css的 :after 偽元素
結合 :after 偽元素（注意這不是偽類，而是偽元素，代表乙個元素之後最近的元素）和觸發布局的 ie hack，可以完美相容當前各大主流瀏覽器。
給包含浮動元素的容器新增乙個 clearfix 的 class，然後給這個 class 新增乙個 :after 偽元素，在元素末尾新增乙個看不見的塊元素，讓這個塊元素來清除浮動。
box2
通過css偽元素，在容器的末尾，插入乙個點 "."，然後通過 height 和 visbility 屬性使其不可見，再為插入的點設定 clear屬性來清除浮動，其原理跟上述兩種方法類似。
事實上，上述方法插入任何內容，都可以清除浮動。當然，如果插入乙個空格的話，就不必設定 height 和 visbility 屬性，**會跟簡潔。如：
.clearfix:after
需要注意的是，由於ie7及以下的版本不支援 :after 偽元素，因此還需要為 .clearfix 設定width、或 height、或 zoom 等一系列屬性，來觸發布局（即，使ie私有屬性 haslayout 的值為 true）。如：
.clearfix
在這些屬性值中，zoom 用於設定元素的縮放比例，取值 1 就會使用元素的實際尺寸。因此，使用 zoom: 1 既可以觸發布局，又不會對元素造成其他影響，相對而言比較安全。
讓容器建立bfc
可以利用bfc特性，來清除浮動。準確的講，說清除浮動不太合適，應該說是讓容器建立乙個bfc，來包含浮動元素。可以為容器設定以下屬性，來建立乙個新的bfc，間接實現清除浮動的效果：
float: left | right
position: absolute | fixed
overflow: hidden | auto | scroll
display: inline-block | table-cell | table | flex | inline-flex
雖然設定上述屬性都可以建立bfc，實現清除浮動的效果，但是，float、position、display 屬性可能會影響整體布局。因此，最常用的還是設定 overflow 屬性。
1）讓容器浮動
讓容器浮動後，容器就會建立乙個新的bfc，使它可以包含浮動元素。計算bfc的高度時，浮動子元素也參與計算。因此，容器的高度就表現正常，其他框的位置也就正常了。
2）為容器新增 position 屬性
如果為容器設定 position: absolute 或 position: fixed，容器就會建立乙個新的bfc，使它可以包含浮動元素。
3）為容器新增 overflow 屬性
如果為容器設定 overflow: hidden 或 overflow: auto，容器就會建立乙個新的bfc，使它可以包含浮動元素。
這個方法不需要額外元素，有著較好的語義性，也比較簡單。但是，需要要記住，overflow 屬性不是為清除浮動而定義的，注意不要隱藏了不該隱藏的內容或觸發了不必要的滾動條。
說明：bfc 與 haslayout
從表現上來說，haslayout 跟 bfc 的功能很相似，只是 haslayout 自身存在很多問題，導致了 ie6-7 中的一系列 bug。
既然 haslayout 有著跟 bfc 相似的功能，而 ie7 及以下的版本不支援 bfc。因此，為了避免不同瀏覽器下的表現差異，在實際開發中，需要建立 bfc 的元素，同時也要觸發 haslayout。
浮動與clear屬性
其實浮動我是這麼理解的，讓某個元素，脫離原來的標準流，浮動在標準流之上，它擁有自己的浮動流，和標準流不是乙個層次上的。首先呢，fnncat 來給建立四個有顏色的色塊，為了方便理解他們浮動的具體位置。一，畫四個色塊，沒有浮動。這是最開始的樣子，div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳...
CSS 清除浮動Clear
還記得第二課我們做的例子的效果麼？最後效果是，紅色方塊和藍色方塊都處於一行，我們使用 float left 打擊了塊狀元素的 霸道 即塊狀元素不允許其他元素和它處於同一行。我們將紅色方塊的css 中加入了 float left 後，紅色方塊終於允許藍色方塊和它處於同一行。如圖 我們換一種方法表達上面...
css之clear 清除浮動
哈哈哈哈哈哈哈，我懂了原理啦 clear清除的是浮動的高度 就是跑到位置 而不影響浮動的方向.原理如下 clear清除的是元素本身，但不會影響方向。通俗點說就是clear清除的是浮動產生的文件流。舉個例子，就是有2個div,當第二個div產生浮動時，第二個div會脫離第二行，到達第一行。當你清除它的...