注：本文是對眾多博客的學(xué)習(xí)和總結(jié)，可能存在理解錯誤。請帶著懷疑的眼光，同時如果有錯誤希望能指出。
如果你喜歡我的文章，可以關(guān)注我的私人博客:http://blog-qeesung.rhcloud.com/

入門前端也算是有三個月之久了，發(fā)現(xiàn)Float這個屬性一直都很迷惑，只是知道一些簡單的浮動規(guī)則，并沒有深入去學(xué)習(xí)，一旦遇到一點復(fù)雜的浮動場景，自己也就懵了。

于是在網(wǎng)上找了數(shù)篇關(guān)于浮動的博客文章，加上自己理解，在這里總結(jié)一下。

CSS的float才開始學(xué)習(xí)的時候總是感覺沒有任何的規(guī)律可言，總是有許多想不明白的地方，"為什么這個div塊要在這個div塊的下方？"，"為什么這個浮動元素會是這樣對齊？"。

其實Float是有規(guī)則可以依據(jù)的，Float一共有九個規(guī)則來控制浮動元素的行為:

The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.

If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.

A floating box"s outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

The outer top of an element"s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block"s right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

A floating box must be placed as high as possible.

A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

上述內(nèi)容摘錄于此處，咋一看挺復(fù)雜，其實真的挺復(fù)雜的，對于博主我這種英語渣來說，是挺難理解的，如果文中有翻譯或者理解不對的地方，希望大家指正。

原文:The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
譯文:左浮動的盒子的左邊界不會超出容器的左邊界，右浮動同理.

以左浮動為例：
html

css

body{
    background-color:yellow;
}

#outer-div{
    height:200px;
    width:200px;
    background-color:red;
}

#inner-div{
    height:100px;
    width:100px;
    background-color:blue;
    float:left;
}

顯示效果

100x100的藍(lán)色盒子為左浮動元素，200x200的紅色盒子為藍(lán)色盒子的容器，可見藍(lán)盒子的左邊界沒有超出紅色盒子的左邊界。

原文:If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
譯文:如果盒子是左浮動的,那么在html文檔中晚出現(xiàn)的左浮動盒子只允許出現(xiàn)在先出現(xiàn)的左浮動盒子的右邊或者晚出現(xiàn)的左浮動盒子的頂部必須在早出現(xiàn)左浮動盒子的底部之下。右浮動同理.

以左浮動為例:

html

    
100 x 100
    
100 x 100
    
100 x 100
    
65 x 100
    
65 x 100
    
100 x 100
    
100 x 100
    400 x  500

css

#outer-div{
    height:400px;
    width:500px;
    background-color:red;
}

#inner-div{
    height:100px;
    width:100px;
    background-color:blue;
    float:left;
    margin:10px;
}

#inner-div1{
    height:65px;
    width:100px;
    background-color:pink;
    float:left;
    margin:10px;
}

body{
    background-color:yellow
}

顯示效果：

這里需要解釋的有幾個地方:

方塊五為何不另起一行，放在方塊一下面，而是放在方塊四的下面？ 這里我們將會在Rule8和Rule9解釋

方塊六和方塊1之間為何空著那么寬的空間？ 這是因為方塊五早出現(xiàn)在方塊六之前，所以方塊六的頂部不會超出方塊五的底部。

原文:The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.
譯文:左浮動盒子的右外邊緣可能不在其旁邊的任何右浮動框的左外邊緣的右邊，右浮動同理.

html

    
150 x 270 float:left
    
100 x 250 float:right
    400 x 500

css

div{
    margin:5px;
}

#outer-div{
    height:400px;
    width:500px;
    background-color:red;
}

#float-left {
    height:150px;
    width:270px;
    float:left;
    background-color:blue;
}

#float-right{
    height:100px;
    width:250px;
    float:right;
    background-color:blue;
}
body{
    background-color:yellow
}

顯示效果:

左浮動盒子的寬度(270)+有浮動盒子的寬度(250)> 容器的寬度(500)，所以右浮動盒子并沒有和左浮動盒子并列，而是在左浮動盒子的下方。

原文:A floating box’s outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
譯文:浮動盒子的頂部不能超出容器的頂部邊界

這個就不用解釋了

原文:The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
譯文:浮動盒子的頂部不會超出在html文檔中早出現(xiàn)的的塊級元素(block)或者是浮動元素的頂部

html

    
1
    
2
    
3
    400 x 500

css

div{
    margin:5px;
}

#outer-div{
    height:400px;
    width:500px;
    background-color:red;
}

#float-left {
    height:100px;
    width:100px;
    float:left;
    background-color:lightblue;
}

#float-right{
    height:100px;
    width:200px;
    float:right;
    background-color:lightyellow;
}
body{
    background-color:yellow
}

顯示效果:

如果將紅色容器的礦都縮短為，使之單行之內(nèi)不能夠容下三個浮動元素，那么哪一個盒子會被擠到下一行呢？1？2？3？
我們來試著將紅色容器盒子的寬度縮減為400px

#outer-div{
    height:400px;
    width:400px;
    background-color:red;
}

我們將會得到下面顯示效果

可見盒子三被擠到了下一行，這是因為盒子二的html文件中比盒子三早出現(xiàn)，所以盒子二不能低于盒子三。于是就將盒子三下沉。

原文:The outer top of an element’s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
譯文:浮動盒子的頂部不會超出在html文檔中早出現(xiàn)的包含盒子的line-box元素頂部

html

    Purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus nulla at volutpat diam ut.
    Dui vivamus arcu felis, bibendum ut tristique et, egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla!
    
 100 x 100

css

div{
    margin:5px;
}

#outer-div{
    height:400px;
    width:500px;
    background-color:red;
}

#float-left {
    height:100px;
    width:100px;
    float:left;
    background-color:lightblue;
}

body{
    background-color:yellow
}

顯示效果:

在浮動元素之前是一行行內(nèi)元素，所以浮動盒子就沒有超過文本的最后一行的頂部?？赡苓@里不太清晰，我們將文本換成圖片再看一下。

html

    
    
    
    
    
 100 x 100

顯示效果

為什么浮動元素不浮動上去把一個圖片元素擠下來呢？如果浮動元素向上浮動將一個圖片元素擠到第二行，那么現(xiàn)在浮動元素就高于比它早出現(xiàn)的圖片元素。就違反了規(guī)則

這里我們試著將紅色盒子容器寬度縮小，使之一行之內(nèi)容不下四個圖片。

css

#outer-div{
      height:400px;
      width:400px;
      background-color:red;
}

那么圖片將會折行，如下所示

行內(nèi)元素圖片四就環(huán)繞浮動元素，但是浮動元素并沒有超出行內(nèi)元素的。

原文:A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block’s right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
譯文:一個左浮動元素右邊的另一個左浮動元素的右邊界不會超出容器的右邊界,右浮動同理

這個也很好理解，就是如果一行之內(nèi)要放第二個浮動元素，如果放不下了，那就換行。這個就不詳細(xì)解釋啦

原文:A floating box must be placed as high as possible.
譯文:一個浮動盒子應(yīng)該放的盡可能的高

原文:A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.
譯文:一個左浮動元素應(yīng)該放的盡可能的靠左，右浮動元素應(yīng)該被放的盡可能的靠右。當(dāng)元素既可以放置"最高"又可以"最右"的時候，優(yōu)先考慮"最高"。

上面的兩個規(guī)則要連起來一起看，這里我們就借鑒一下規(guī)則二中的例子

為什么盒子五不直接放在盒子一下面，這是因為當(dāng)一個元素既可以放的最左（最右）和最高的時候，優(yōu)先選擇最高，所以這里就放在了盒子四的下面。

最后說兩句，浮動元素其實對在它出現(xiàn)之前的元素影響不大，但是由于浮動是使元素脫離了文檔流，那么在浮動元素之后出現(xiàn)的元素：

塊元素:直接無視浮動元素，該怎么顯示就怎么顯示，并且會被浮動元素覆蓋。

行內(nèi)元素:行內(nèi)元素會環(huán)繞在浮動元素周圍。

下面我們就來一個簡單的例子:

html

    

        P1 :  Augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla?
    
    
 100 x 100
    

            P2 :  At lectus urna duis convallis convallis tellus, id interdum velit laoreet id donec ultrices tincidunt arcu, non sodales neque sodales ut etiam. Feugiat vivamus at augue eget arcu dictum varius?
    

css

div{
    margin:5px;
}

#outer-div{
    height:400px;
    width:500px;
    background-color:red;
}

#float-left {
    height:100px;
    width:100px;
    float:left;
    background-color:lightblue;
}

body{
    background-color:yellow
}

顯示效果

這里因為p1是block元素，直接卡住了浮動元素，然后p2這個block元素直接忽視了浮動元素的存在，然后排版在浮動元素的下方，但是p2的中的文本是inline元素，于是就圍繞浮動元素排布。

W3 float-rules

Everything You Never Knew About CSS Floats

The CSS Float Rules

CSS浮動float詳解

回歸CSS標(biāo)準(zhǔn)之Float