html - 在 float 中的行为

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 创建的test div 底部有一个空格。如果我们删除 float:left 这个空间就消失了，就好像它不是任何/p 一样......谁能向我解释为什么？

谢谢

Answer 1

如果没有在 div 上应用 float:left，您会看到 collapsing margins ，其中 div 和 p 合并的底部边距:

Parent and first/last child If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

但是，float:left 创建了一个新的 block formatting context ，类似于将 overflow:auto 添加到 div 以代替 float:left 时的效果。这使得边距不会塌陷。

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

另请参阅:http://www.w3.org/TR/CSS21/visuren.html#block-formatting