html - 如何向左或向右浮动两次？

Question

基本上，我想在 div 的最左边区域放置两个不同的元素，在 div 的最右边区域放置两个不同的元素。

但是，如果我使用 float:left 和 float:right 两次，我会得到以下结果:

   ELEMENT                                   ELEMENT

          ELEMENT                     ELEMENT 

而不是

   ELEMENT                                    ELEMENT

   ELEMENT                                    ELEMENT

这是因为，当我第二次 float 时，css 会 float 剩余的剩余空间。

我该如何修复这个错误？

Answer 1

您可以将 clear:both; 与 float:left; 属性一起使用。

尝试 Jsbin 演示

.left {
   float:left;
   width:40%;
   height:240px;
   border:1px solid red;
}

.right {
   float:right;
   width:40%;
   border:1px solid red;
   height:240px;
} 

.elem1 {
   float:left;
   margin-bottom:20px;
}

.elem2 {
   float:left;
   clear:both;
}

.elem3 {
   float:left;
   margin-bottom:20px;
}

.elem4 {
   float:left;
   clear:both;
}

<div class="left">
    <div class="elem1">element 1</div>
    <div class="elem2">element 2</div>
 </div>
 <div class="right">
    <div class="elem3">element3</div>
    <div class="elem4">element4</div>
</div>