浮動(Float)

浮動的原始意義

在絕大多數Web開發者的語境中，「佈局」這個術語和「排版」是有差別的。「佈局」偏向於指宏觀的GUI區域劃分，好比雙欄佈局或三欄佈局等。從這一點出發，float其實本不是一項用於「佈局」的屬性。float對應的實際上是傳統印刷排版中圖文混排中的環繞。

在 CSS 中，用 float 和 position 的區別是什麼？

浮動的特性

float與block

常見元素inline,inline-block,table-cell等等設置float屬性,都被視爲塊級元素,至關於display設置爲block

Specified value	Computed value
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
其它	與指定值相同

float與包裹性

若是margin-left或者margin-right的計算值爲auto，它們的應用值爲0

對於非替換元素,若是width的計算值爲auto，應用值爲「自適應（shrink-to-fit）」寬度

自適應寬度的計算與用自動錶格佈局算法去算一個表格單元的寬度相似。粗略地講：經過格式化不含除顯式換行外的換行來計算首選寬度（preferred width），而後計算首選最小寬度（preferred minimum width），例如，經過嘗試全部可能的換行。CSS 2.1沒有定義準確的算法。第三步，算出可用寬度（available width）：這種狀況下，就是包含塊的寬度減去margin-left，border-left-width，padding-left，padding-right，border-right-width，margin-right和全部相關滾動條的寬度的應用值

那麼自適應寬度就是：min(max(首選最小寬度, 可用寬度), 首選寬度)

對於替換元素,width的應用值由行內的可替換元素決定

咱們說的包裹性,主要就是指自適應寬度,一般狀況下也就是首選寬度

特定狀況下（例如，見上面的10.6.4節和10.6.6節），一個創建了塊格式化上下文的元素的高度按照以下規則計算：

若是它只含有行內級子級，高度就是最高的行盒的top與最低的行盒的bottom之間的距離

若是它只含有塊級子級，高度由就是最高的塊級子級盒的top margin-edge到最低的塊級子級盒的bottom margin-edge之間的距離

此外，若是該元素含有任意bottom margin邊位於元素的content邊下方的的浮動後代，那麼高度增長至可以包含這些邊。只考慮參與此塊級格式化上下文的浮動，例如，不考慮絕對定位的後代中的浮動或者其它浮動

float包裹性展現

float與兄弟元素

浮動 在浮動模型中，一個盒先根據常規流佈局，而後從流中取出來儘量地左移或右移。其它內容可能會沿着浮動（盒）的一側排列（Content may flow along the side of a float）

一個浮動盒會向左或向右移動，直到其外邊（outer edge）捱到包含塊邊或者另外一個浮動盒的外邊。若是存在行盒，浮動盒的外top（邊）會與當前行盒的top（邊）對齊

由於浮動（盒）不在流內，在浮動盒以前或者以後建立的未定位的（non-positioned）塊盒會豎直排列，就像浮動不存在同樣。然而，接着（next to）浮動（盒）建立的當前及後續行盒會進行必要的縮短，爲了給浮動（盒）的margin box讓出空間

浮動（盒）的內容會堆疊起來，就像浮動（盒）生成了新的層疊上下文（stacking contexts）同樣，除了全部定位的元素和實際建立了新的層疊上下文並參與了浮動（盒）的父級堆疊上下文的元素。一個浮動（盒）能夠與常規流中的其它盒重疊（例如，當一個常規流盒接着一個有負margin的浮動（盒）時），出現這種狀況時，浮動（盒）會被渲染在未定位的（non-positioned）流內塊以前，流內行內（盒）以後

float雖然使元素脫離了文檔流,可是它仍然佔據着位置,這也是影響外部元素寬度計算的緣由之一

float盒的兄弟塊盒會豎直排列,看成float盒不存在,而兄弟行內盒會縮進,給float讓出空間

對於float盒,若是它與常規流中的其它盒重疊,那麼它會覆蓋流內塊,而且被流內行內盒覆蓋

float與圖文混排

一個浮動的盒與任何其它盒之間的margin不會合並（甚至一個浮動盒與它的流內子級之間也不會）

1. 一個左浮動盒的left外邊（outer edge）不能位於其包含塊的left邊的左邊。向右浮動的元素也有相似的規則
   float與左右邊界

2. 若是當前盒是向左浮動的，而且在這以前源文檔中還有元素生成了左浮動盒，那麼對於每個以前的盒，要麼 當前盒的left外邊在以前的盒的right外邊的右邊，要麼它的top要比以前的盒的bottom低。右浮動盒也有相似的規則
   float與兄弟float排列

3. 一個左浮動盒的right外邊不能位於接着它的任意右浮動盒的left外邊的右邊。右浮動盒也有相似的規則
   float與兄弟float不能重疊

4. 一個浮動盒的外top（outer top）不能高於其包含塊的top。當浮動（盒）出如今兩個合併的margin之間時，浮動（盒）的定位就像它有一個空的匿名塊父級存在於（當前）流同樣。這個父級的位置經過margin合併章節中的規則來定義
   float與margin

5. 一個浮動盒的外top不能高於源文檔中任何在此以前的元素生成的塊盒或者浮動盒的外top
   float與塊盒,浮動盒

6. 一個元素的浮動盒的外top不能高於任何含有源文檔中在此以前的元素生成的盒的行盒的top
   float與行盒

7. 左邊存在另外一個左浮動盒的左浮動盒的right外邊不能位於其包含塊的right邊的右邊（不嚴謹的：一個左浮動盒不能超出right邊，除非它已經儘可能向左（緊挨着包含塊的left邊）了）。右浮動元素也有相似的規則
   多個float與包含塊邊界

8. 浮動盒必須儘可能高往高放（A floating box must be placed as high as possible）

9. 左浮動盒必須儘可能往左放，右浮動盒儘可能往右放。更高的位置要比更左/右的位置優先
   float與高度

因此,float自身的主要原則是:浮動元素之間不重疊；儘量向邊緣漂浮，但不越界。

float與父元素

當overflow計算值爲visible時常規流中的塊級不可替換元素

只考慮常規流中的子級（即，浮動盒和絕對定位的盒會被忽略，而且相對定位的盒不考慮其偏移）。注意子級盒能夠是一個匿名塊盒

這就是float元素的父元素塌陷的緣由

float與父元素塌陷

那麼,float在父元素的兄弟元素上會不會起做用呢

float與父元素的非浮動,浮動兄弟元素

這些規則裏涉及的其它元素僅僅是指與浮動（盒）處於同一個塊格式化上下文的其它元素

因爲父元素跟它的兄弟元素同出於一個BFC中,因此行爲規則與同處於同一個父元素之中的元素的規則相同：塊級元素重疊；行內元素環繞；浮動元素跟隨。

clear與閉合浮動

該屬性說明了一個元素的盒的哪一邊不能與以前的浮動盒相鄰。'clear'屬性不考慮元素自身的或者其它塊格式化上下文中的浮動

爲了解決上面的父元素高度塌陷以及父元素的兄弟元素受到子元素float影響的問題,咱們須要閉合浮動

.clearfix:before,
.clearfix:after
{
  display: table;
  content: " ";
}
.clearfix:after
{
  clear: both;
}
.clearfix{*zoom:1;} //ie 6 7

before是由於table類型能生成獨立的bfc，防止上邊距塌陷，

after負責清除浮動，防止父級高度塌陷；配合使用，代碼少，效率高。

想要具體瞭解,請看一絲大大的那些年咱們一塊兒清除過的浮動,這裏就不詳細寫了

迴歸CSS標準之Float