浮动div有一个正在打破流的余量

Question

我有两个div：向左浮动和向右浮动。右侧div上的边距打断了左侧div，使其在页面上看起来低于应有的位置。我希望两个div都能触及顶部。

HTML:

 <div class="right_div">
            This div is in the right place.
        </div>
    <div class="clear"> </div>
    <div class="left_div">
This div should be at the top</div>

CSS：

.right_div {
    float: right;
    margin-right:20px;
    margin-top: 20px;
    font-weight: 600;
    background-color:blue;
}
 .left_div{
    margin-left: 20px;
    margin: 0 0 0 20px;
    padding: 0;
    background-color: tomato;
    text-align: left;
    max-width: 10em;
 }
.clear {
    clear:both;
}

以下是JSFIDDLE：http://jsfiddle.net/eLSc8/

Answer 1

删除

<div class="clear"> </div>

试试这个

<div class="right_div">
            This div is in the right place.
        </div>
    <div class="left_div">

Answer 2

删除

<div class="clear"> </div>

并且红色元素将保持在顶部
作为一个附带说明，应该避免放置仅用于样式设置目的的空标记。如果你需要在某个地方应用浮动清算，你应该使用非结构性方法，如easycleaning和现代变体（例如，参见html5样板的.clearfix类）

Answer 3

尝试这个

http://jsfiddle.net/eLSc8/1/

请把这个清除两个

<div class="clear"> </div>

Answer 4

正如大家所说；你可能会失去清算份额。然后只需在另一个div的左边添加一个float来对齐它。根据您的结构和您希望它的定位方式，您可能需要包含它们或添加边距。检查jsfiddle.net/Rsy6F2/

Answer 5

这是想要的效果吗：

http://jsfiddle.net/eLSc8/4/？

HTML:

<div class="left_div">This div should be at the top</div>
<div class="right_div">This div is in the right place.</div>

CSS：

.right_div {
    font-weight: 600;
    background-color:blue;
    position: absolute;
    top: 20px;
    right: 20px;
    height: 2.2em;
}
.left_div {
    position:absolute;
    top: 20px;
    left: 20px;
    background-color: tomato;
    height: 2.2em;
}