多个漂浮清晰，但右边的漂浮物被左边的漂浮物压低

Question

所以我有这个代码：

html:

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

css:

.left{
  float: left;
  clear: left;
  border: 1px solid blue;
}
.right{
  float: right;
  clear: right;
  border: 1px solid red;
}

jsfiddle: https://jsfiddle.net/839okvsb/4/

左边的 div 是我期望的位置，但是右边的是在 div 2 之后开始而不是从顶部开始。

为什么会这样，我该如何解决？我完全不明白为什么会这样。

PS：我无法将左 div 包含在一个巨大的 div 中，我需要将那些 div 分开（因为有时 div1将是全角，有时不是）。

编辑：我不能把它们混在一起，正如你在这里看到的：https://jsfiddle.net/839okvsb/5//混合仍然不能解决问题。

edit2：我不能把它们打包成一个大的 div，因为我需要它们能够做到这一点：https://jsfiddle.net/839okvsb/8/ 当我需要的时候.

Answer 1

因为你不能像这样使用 float left/right 创建一个 2 "column" 布局（即使你清除它们），你需要这样的标记，否则你会得到结果显示在您的问题中，因为这就是浮点数的工作方式。

.left{
  float: left;
  clear: left;
  border: 1px solid blue;
  width: 48%;
}
.right{
  float: right;
  clear: right;
  width: 48%;
  border: 1px solid red;
}

<div class="left">left 1</div>
<div class="right">right 1</div>
<div class="left">left 2</div>
<div class="right">right 2</div>
<div class="left">left 3</div>
<div class="right">right 3</div>

或者包裹你的花车

.left{
  float: left;
  clear: left;
  width: 48%;
}
.right{
  float: right;
  clear: right;
  width: 48%;
}
.left .left{
  border: 1px solid blue;
  width: 100%;
}
.right .right{
  width: 100%;
  border: 1px solid red;
}

<div class="left">
  <div class="left">left 1</div>
  <div class="left">left 2</div>
  <div class="left">left 3</div>
</div>

<div class="right">
  <div class="right">right 1</div>
  <div class="right">right 2</div>
  <div class="right">right 3</div>
</div>

更新基于edit/comment

如果左右不总是左右，例如当其中一个是100%宽时，这里是另一种选择，其中所有都向左浮动

.left, 
.right {
  float: left;
  border: 1px solid blue;
  box-sizing: border-box;
  width: 48%;
  margin-left: 4%;
}
.left:nth-child(1) {
  width: 100%;
  margin-left: 0;
}
.right {
  margin-left: 0;
}
.right{
  border: 1px solid red;
}

<div class="left">left 1</div>
<div class="right">right 1</div>
<div class="left">left 2</div>
<div class="right">right 2</div>
<div class="left">left 3</div>
<div class="right">right 3</div>

多个漂浮清晰，但右边的漂浮物被左边的漂浮物压低

multiple floats with clear, yet right ones are pushed down by left ones

css

css-float