css - float 的 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">