CSS Float nine rules

注：本文是對衆多博客的學習和總結，可能存在理解錯誤。請帶着懷疑的眼光，同時若是有錯誤但願能指出。
若是你喜歡個人文章，能夠關注個人私人博客:http://blog-qeesung.rhcloud.com/

入門前端也算是有三個月之久了，發現Float這個屬性一直都很迷惑，只是知道一些簡單的浮動規則，並無深刻去學習，一旦遇到一點複雜的浮動場景，本身也就懵了。

因而在網上找了數篇關於浮動的博客文章，加上本身理解，在這裏總結一下。

w3 css float nine rules

CSS的float纔開始學習的時候老是感受沒有任何的規律可言，老是有許多想不明白的地方，"爲何這個div塊要在這個div塊的下方？"，"爲何這個浮動元素會是這樣對齊？"。

其實Float是有規則能夠依據的，Float一共有九個規則來控制浮動元素的行爲:

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. A floating box must be placed as high as possible.

9. 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.

上述內容摘錄於此處，咋一看挺複雜，其實真的挺複雜的，對於博主我這種英語渣來講，是挺難理解的，若是文中有翻譯或者理解不對的地方，但願你們指正。

CSS Float Rule1

原文: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

<div id="outer-div">
    <div id="inner-div"></div>
</div>

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的藍色盒子爲左浮動元素，200x200的紅色盒子爲藍色盒子的容器，可見藍盒子的左邊界沒有超出紅色盒子的左邊界。

CSS Float Rule2

原文: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文檔中晚出現的左浮動盒子只容許出如今先出現的左浮動盒子的右邊或者晚出現的左浮動盒子的頂部必須在早出現左浮動盒子的底部之下。右浮動同理.

以左浮動爲例:

html

<div id="outer-div">
    <div id="inner-div">100 x 100</div>
    <div id="inner-div">100 x 100</div>
    <div id="inner-div">100 x 100</div>
    <div id="inner-div1">65 x 100</div>
    <div id="inner-div1">65 x 100</div>
    <div id="inner-div">100 x 100</div>
    <div id="inner-div">100 x 100</div>
    400 x  500
</div>

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之間爲什麼空着那麼寬的空間？ 這是由於方塊五早出如今方塊六以前，因此方塊六的頂部不會超出方塊五的底部。

CSS Float Rule3

原文: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

<div id="outer-div">
    <div id="float-left">150 x 270 float:left</div>
    <div id="float-right">100 x 250 float:right</div>
    400 x 500
</div>

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)，因此右浮動盒子並無和左浮動盒子並列，而是在左浮動盒子的下方。

CSS Float Rule4

原文: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.

譯文:浮動盒子的頂部不能超出容器的頂部邊界

這個就不用解釋了

CSS Float Rule5

原文: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文檔中早出現的的塊級元素(block)或者是浮動元素的頂部

html

<div id="outer-div">
    <div id="float-left">1</div>
    <div id="float-right">2</div>
    <div id="float-left" style="background-color:pink">3</div>
    400 x 500
</div>

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
}

顯示效果:

若是將紅色容器的礦都縮短爲，使之單行以內不可以容下三個浮動元素，那麼哪個盒子會被擠到下一行呢？1？2？3？
咱們來試着將紅色容器盒子的寬度縮減爲400px

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

咱們將會獲得下面顯示效果

可見盒子三被擠到了下一行，這是由於盒子二的html文件中比盒子三早出現，因此盒子二不能低於盒子三。因而就將盒子三下沉。

CSS Float Rule6

原文: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文檔中早出現的包含盒子的line-box元素頂部

html

<div id="outer-div">
    <span>Purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus nulla at volutpat diam ut.</span>
    <span>Dui vivamus arcu felis, bibendum ut tristique et, egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla!</span>
    <div id="float-left"> 100 x 100</div>
</div>

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
}

顯示效果:

在浮動元素以前是一行行內元素，因此浮動盒子就沒有超過文本的最後一行的頂部。可能這裏不太清晰，咱們將文本換成圖片再看一下。

html

<div id="outer-div">
    <img src="http://placehold.it/100x100&text=1"/>
    <img src="http://placehold.it/100x150&text=2"/>
    <img src="http://placehold.it/100x100&text=3"/>
    <img src="http://placehold.it/100x100&text=4"/>
    <div id="float-left"> 100 x 100</div>
</div>

顯示效果

爲何浮動元素不浮動上去把一個圖片元素擠下來呢？若是浮動元素向上浮動將一個圖片元素擠到第二行，那麼如今浮動元素就高於比它早出現的圖片元素。就違反了規則

這裏咱們試着將紅色盒子容器寬度縮小，使之一行以內容不下四個圖片。

css

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

那麼圖片將會折行，以下所示

行內元素圖片四就環繞浮動元素，可是浮動元素並無超出行內元素的。

CSS Float Rule7

原文: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.

譯文:一個左浮動元素右邊的另外一個左浮動元素的右邊界不會超出容器的右邊界,右浮動同理

這個也很好理解，就是若是一行以內要放第二個浮動元素，若是放不下了，那就換行。這個就不詳細解釋啦

CSS Float Rule8

原文:A floating box must be placed as high as possible.

譯文:一個浮動盒子應該放的儘量的高

CSS Float Rule9

原文: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.

譯文:一個左浮動元素應該放的儘量的靠左，右浮動元素應該被放的儘量的靠右。當元素既能夠放置"最高"又能夠"最右"的時候，優先考慮"最高"。

上面的兩個規則要連起來一塊兒看，這裏咱們就借鑑一下規則二中的例子

爲何盒子五不直接放在盒子一下面，這是由於當一個元素既能夠放的最左（最右）和最高的時候，優先選擇最高，因此這裏就放在了盒子四的下面。

finally

最後說兩句，浮動元素其實對在它出現以前的元素影響不大，可是因爲浮動是使元素脫離了文檔流，那麼在浮動元素以後出現的元素：

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

• 行內元素:行內元素會環繞在浮動元素周圍。

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

html

<div id="outer-div">
    <p>
        P1 :  Augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla?
    </p id="p1">
    <div id="float-left"> 100 x 100</div>
    <p id="p2">
            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?
    </p>
</div>

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標準之Float