DIV不隨float屬性設置前面的DIV浮動到左

Question

哪個CSS規則解釋以下sceanrio：

假設我有以下的HTML CSS片斷

HTML：

<div id="main"> 
    <div id="first"> 
     first div float left 
    </div> 
    <div id="second"> 
     second div does not have a float property set 
     and appears in a new line instead of next to 
     the first div 
    </div> 
</div> 

CSS ：

#first 
    float: left 

我想知道的是，爲什麼第二個div浮動下一個t第一個div，只有當它的寬度被設置。如果我用段落替換第二個div，它也會漂浮在第一個div的旁邊。那麼爲什麼第二個div只有在第一個div的寬度被設置或者它自己的浮動屬性設置爲向左浮動時才位於第一個div的旁邊？

順便說一句。我不想在這裏實現任何佈局。我只是想了解div元素和其他塊元素的這些特定行爲。

編輯：

好的。首先感謝答案。我遇到的問題是基於這樣一個事實：我確實將第一個和第二個div的寬度設置爲相同的值，以便第二個div的內容不能浮動在第一個div上。總結一下，我想知道具有float屬性集的元素被放在頁面流中並且不佔用任何空間是很重要的。其次應該記住只有內容可以流動，而不是實際的div。

Answer 1

A <div>是一個塊級元素，其寬度爲100％，並且在&之前在正常內容流中之後具有換行符。

從技術上講，當你飄起了<div>，你正在做的元素出來的正常流動，使其不再具有&前一後斷行，也是其他網頁內容圍繞它流動。

那麼，爲什麼第二個div只有旁邊的位置第一個當 將其寬度設置或自己的float屬性設置爲左浮動？

浮動的<div>只有在有足夠的空間來並排包含它們時纔會並排顯示。否則，下一個浮動的<div>將換行到新行。這是因爲浮動的<div>不在內容流和defined to behave this way in the spec之內。

但是，在您設置第二個（非浮動）<div>的寬度時會發生什麼問題，您做出了一些錯誤的假設。

第二個<div>本身總是在下面（意思是後面的）漂浮的<div>。而第二個<div>的「內容」總是圍繞浮動的<div>流動。 （見下面的三個例子）

所以無論是否設置第二div的寬度，其內容將仍然流周圍左側浮動div，你可以看到在三個示例來說明。 （爲了說明的目的，第一<div>是紅色用50％的不透明度和所述第二是藍色用厚綠色邊框。）

• Fiddle with second div wider than first

• Fiddle with no set width (100%) on second div

• Fiddle with second div narrower than first

從上面的三個例子可以看出，儘管存在浮動第一<div>的NCE ...

• 第二<div>總是在屏幕的左邊緣開始，儘管第二<div>的寬度。

• 第二個<div>總是從屏幕的上邊緣開始，因爲在第二個<div>之上沒有其他頁面流量內容。

• 第二<div>的實際內容周圍流動（到右側）浮起第一<div>僅在有足夠的空間其容器內，以允許其浮動<div>周圍流動。否則，浮動的<div>的it appears as if it's starting a new line where really only its content is continuing to flow around the bottom。

W3C Spec: 9 Visual formatting model, 9.5 Floats

浮子是被移位到左邊或右邊對當前 線的盒。浮動（或「浮動」框）的最有趣的特徵是內容可能沿着其側面流動（或者由於'清除'屬性而禁止這樣做）。內容向下流動 左浮動框的右側，並向右下浮動框的左側 。以下是對float 的定位和內容流程的介紹;關於浮動行爲的確切規則 在「浮動」屬性的描述中給出。

將浮動框向左或向右移動，直到其外邊緣 接觸包含塊邊緣或另一個浮動塊的外邊緣。 如果存在線框，浮動框的外頂部與當前線框的頂部對齊 。

如果沒有足夠的水平空間用於浮動，它會向下移動 ，直到它適合或不存在更多浮動。

由於浮動不在流動中，所以在浮動框垂直流動前後，非定位塊框創建 ，就好像浮動不存在 一樣。但是，爲了騰出浮標的邊距框 的空間，必要時縮短了浮動的 旁邊創建的當前和隨後的線框。

而且這裏有一大堆的例子...

W3C Spec: 9 Visual formatting model, 9.8 Comparison of normal flow, floats, and absolute positioning

Answer 2

除非您清除浮動塊，否則默認情況下，下一個塊級元素將漂浮在最後一個浮動塊旁邊。

我不知道你想在這裏實現什麼，但如果你想#first浮動，並#second到不能浮動，規則你會希望添加到#first爲：clear:both

但，這很愚蠢，如果你想堆疊它們，你可能會完全刪除浮動屬性。

Answer 3

塊元素佔據其父元素的寬度的100％，所以即使您的第一個div浮動，第二個div也會佔用其父元素的寬度，因此會落在第二行。這就是爲什麼如果你指定一個較小的寬度，它會站在第一個浮動div旁邊。

如果你浮動兩個div，它也可以工作的原因是浮動元素的行爲更像是行內塊元素，這意味着他們只會將內容所需的空間放在裏面。底線是，如果你想讓這兩個div彼此相鄰，你應該只是漂浮他們兩個。

Answer 4

是什麼讓你相信div的旁邊漂浮到對方？事實上他們不是。只是他們的內容顯示在彼此旁邊，但這不是因爲DIV #second位於浮動DIV的左側。如果您設置寬度或不是沒關係。

實際上發生的事情是浮動的DIV #first浮動到左邊。因爲它是浮動的，所以它不在正常流程中。這意味着DIV #second實際上與DIV #first出現的位置相同。 DIV #second內容雖然是內聯內容，內聯內容總是圍繞浮動元素流動。即使是在容器外浮動的元素。所以DIV #second在DIV #first下面，但DIV #second的內容在DIV #first附近浮動。

爲了說明的是，我已經創建此CSS：

#first { float: left; background-color: rgba(255,0,0,0.3); } 
#second { background-color: rgba(0,255,0,1); } 

播放與RGBA（）值的α值（即最後一個參數，它的範圍可以從0到1）的背景的-DIV #first的顏色，你會發現DIV＃second實際上始終低於DIV＃