行爲

Question

我有以下HTML：

<div id="test">  
    <p> 
     Floating behaves differently with paragraphs. Floating behaves differently with 
     paragraphs. Floating behaves differently with paragraphs. 
    </p> 
</div> 

這個CSS：

#test{ 
    float:left; 
    background-color: #222; 
    margin-left: 4%; 
    width: 300px; 
    padding-top: 15px; 
    padding-right: 30px; 
    padding-left: 30px; 
    text-align: justify; 
    color: #FFF;  
} 

你可以在http://jsfiddle.net/fM4bE/看到有在測試股利由對創造的底部空間/ p。如果我們刪除浮動：左這個空間消失，就好像它不是任何/ P ...任何人都可以向我解釋爲什麼？

謝謝

Answer 1

沒有float:left被應用在DIV，你會看到什麼是collapsing margins，其中DIV和對合並的底部邊距：

家長和第一/最後一個孩子如果沒有邊框，內邊距，內嵌內容或間距，以將第一個子區塊的邊緣頂部或無邊框，填充，內嵌 內容，高度，最小高度，或最大高度來分隔塊的邊緣底部與其邊緣的底部那麼這些利潤率就會崩潰。父母不在 之外，摺疊的保證金結束。

然而，float:left創建一個新的block formatting context，類似於如果添加它來代替float:left股利增加overflow:auto會做。這可以使邊距不會摺疊。

塊格式化上下文是彩車的定位很重要（見 浮動）和清算（看清楚）。定位 和清除浮動的規則僅適用於同一塊 格式化上下文中的內容。浮動不影響其他 塊格式上下文中的事物佈局，並且清除僅清除 相同塊格式上下文中過去的浮動。

參見：http://www.w3.org/TR/CSS21/visuren.html#block-formatting