Question

为什么这个HTML代码：

<html>
    <head>
        <style type="text/css">
            .left { background-color: yellow; }
            .right { float: right;  background-color: lightgray; width: 150px; }
        </style>
    </head>
    <div>
        <div class="right">
            <p>right</p>
        </div>

        <div class="left">
            <p>left</p>
        </div>
    </div>
</html>

...导致div.right比div.left更高（高度更大）（在FF和chrome中）： enter image description here

Answer 1

重置您的<p>代码。

p {margin:0;padding:0;}

有关重置CSS的更多信息。

http://meyerweb.com/eric/tools/css/reset/

Answer 2

因为您悬空的是right div而不是left div。这意味着margin上的p位于right div内，而left div上的div位于{{1}}的外侧

Answer 3

您在这里看到的是折叠边距和浮动之间的相互作用。

考虑以下HTML：

<div class="wrap">
    <div class="right">
        <p>right</p>
    </div>
    <div class="left">
        <p>left</p>
    </div>
</div>

除了包装元素之外，这基本上就是你所拥有的。

现在看看CSS：

.wrap {
    outline: 2px dotted red;
    padding: 1px;
}
p {
    outline: 1px dotted blue;
    margin: 2.00em 0;
}
.left {
    background-color: yellow;
}
.right {
    float: right;
    background-color: lightgray;
    width: 150px;
}

我添加了.wrap 1px填充，以确保您可以看到边距的影响。

现在这里是小提琴：http://jsfiddle.net/audetwebdesign/9hhkk/

您在此处看到的是同一基线上的文本，右侧浮动文本正如您所期望的那样。左右元素都有相同的边距。

在您的示例中，.left的上边距与其包含块的上边距折叠。但是，.right元素是浮动的，并且浮动元素的边距不会折叠，因此您会看到额外的填充。

我设置了我的演示，以便插入元素的边距不会崩溃。

CSS浮动权利 - 不清楚计算的高度和边距如何工作

3 个答案: