div內的文字行爲

Question

我有<div>裏面的文字沒有border屬性。

<div id="main"> 
    <div id="second"></div> 
    <p>TEXT</p> 
</div> 

CSS

#second { 
    height: 100px; 
    width: 100px; 
    background:red; 
    float:left; 
} 

#main { 
    width: 200px; 
    height: 200px; 
} 

我的文字對齊如與其他分區上顯示在this example。

當我添加CSS邊框屬性DIV，pharagraph已申請保證金 - see here

它爲什麼會發生？

Answer 1

這是意想不到的行爲來自只使用float:left;一格。如果你使用float也是，那麼你不會得到不同的行爲。

Check this demo：打開/關閉邊框。

從spec：

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

如果浮子沒有足夠的水平空間，它將向下移動，直到它適合或不再有浮子存在。