說浮動就必須提及一下文件流，html當中的元素按照從左到右，從上到下的順序進行排列稱之為文件流，也就是正常排列。
而浮動是什麼呢？浮動會讓元素脫離文件流，假如a元素浮動了，原本排在該元素之後的元素發現a元素不在這個文件流了，就會無視它往上接到a元素前面的元素之後(ps:但是文字並不會無視它，還會環繞a元素，也就是a元素沒有脫離文字流，
而如果使用position的絕對定位會連文字流也脫離文件流。
浮動的好處當然是布局了，例如通過浮動來形成三列布局，文字環繞等等。但是浮動也有乙個問題，那就是會導致高度的塌陷，就像上面的顯示，父元素的高度塌陷了，並沒有將浮動的子元素包裹進去，這樣子就會造成布局上的錯誤。
什麼是bfc？bfc是block formatting context的縮寫，也就是塊級格式化上下文，建立bfc有以下情況：
bfc的特性就是包裹浮動的元素。按照我的理解，當你建立bfc之後元素就會把裡面的東西視為自己的東西，包括浮動元素，然後建立乙個私有領域給包裹進來。此外bfc還有還有如下特性。
1.讓原本會疊加的上下外邊距疊加無效。將想要邊距失效的兩個盒子分別放入乙個父盒子，然後為父盒子建立bfc。
2.建立bfc的元素將不會圍繞浮動元素，圖中文字用p標籤包裹並建立bfc，右上角浮動元素，可以看見文字並沒有環繞浮動元素。
清除浮動方法大致有兩類，一類是clear:both | left | right,另一類則是建立bfc,細分又可以分為多種。
缺點：增加了額外的標籤，並且很顯然這並不符合語義化。
*使用 br標籤和其自身的 html屬性，br 有clear=all | left | right | none；的屬性。
缺點：同上。
ps:由於ie6-7不支援:after，使用``zoom:1觸發haslayout`。其實是通過 content 在元素的後面生成了內容為空的塊級元素
**如下
.clearfix:after
.clearfix
缺點：復用方式不當會造成**量增加。
偽元素還有一種寫法
// 用display:table 是為了避免外邊距margin重疊導致的margin塌陷, 內部元素缺省會成為 table-cell 單元格的形式
.clearfix:before, .clearfix:after
.clearfix:after
.clearfix
缺點：由於hidden的原因，當內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素，還會導致中鍵失效（滑鼠中鍵）。
優點：同上
缺點：多個巢狀後，會有bug，詳情看原文。
優點：**少
缺點：總不能一直浮動到body吧。
優點：結構語義化完全正確，**量極少。
缺點：會造成盒模型的改變。
其餘的參考上面如何建立bfc。
那些年我們一起清除過的浮動
關於block formatting context－－bfc和ie的haslayout
理解css布局和bfc
浮動與清除浮動
left 元素向左浮動。right 元素向右浮動。none 預設值。元素不浮動，並會顯示在其在文字中出現的位置。浮動的特性 浮動元素會從普通文件流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環繞。不管乙個元素是行內元素還是塊級元素，如果被設定了浮動，那浮動元素會生成乙個塊級框，可以...
浮動與清除浮動
為元素設定了浮動之後，元素就會脫離文件流 可以看做是漂浮在文件流之上 存在。所有產生了浮動流的元素，塊級元素看不到它們。產生了bfc的元素和文字類屬性 inline 的元素以及文字都能看到浮動元素。如何觸發乙個盒子的bfc？position absolute float left right dis...
浮動與清除浮動
浮動布局是一種常見的布局方式，最初的使用目的是進行 的混排 清除浮動 浮動的使用場景 浮動通過css定義 div1 浮動可以取的值 none 預設 left right 當元素進行左浮動或者右浮動之後會脫離文件流，並且構成乙個浮動流，會覆蓋在沒有浮動的元素上，並且允許文字和內聯元素環繞在它周圍 浮動...