1

为什么是这个 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>

...导致比（在 FF 和 chrome 中） div.right更高（高度大于）：div.left在此处输入图像描述

4

3 回答 3

2

重置您的<p>标签。

p {margin:0;padding:0;}

更多关于重置 CSS。

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

于 2013-04-23T14:43:45.183 回答
2

因为你是浮动的right div而不是浮动的left div。这意味着marginon thep在内部，right div而对您left div来说它位于外部div

于 2013-04-23T15:13:05.967 回答
1

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

考虑以下 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元素是浮动的，并且浮动元素的边距不会塌陷，因此您会看到额外的填充。

我设置了我的演示，以便流入元素的边距不会折叠。

于 2013-04-23T15:23:50.107 回答