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创建的测试div底部有一个空格。如果我们移除浮动：左边这个空间消失就好像它不是任何/ p ...任何人都可以解释为什么？

谢谢

Answer 1

如果没有将float:left应用于div，您会看到collapsing margins，其中div和p的下边距合并：

父级和第一个/最后一个子级如果没有边框，填充，内联内容或间隙将块的边距顶部与 margin-top的第一个子块，或没有边框，填充，内联内容，高度，最小高度或最大高度来分隔在最后一个孩子的边缘底部的块的底部 - 那些利润就会崩溃。倒塌的保证金最终在外面父节点。

但是，float:left会创建一个新的block formatting context，类似于添加overflow:auto，如果您将其添加到div而不是float:left。这样可以使边距不会崩溃。

块格式化上下文对于定位非常重要（请参阅漂浮物）和清除浮体（见清楚）。定位规则并且清除浮动仅适用于同一块内的事物格式化上下文浮点数不会影响其他事物的布局阻止格式化上下文，并清除只清除过去的浮动相同的块格式化上下文。

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

<p>内浮点</p>的行为

1 个答案: