CSS清除:在尝试将元素拆分为2组时,左侧突破新行

Question

JSFiddle链接:这里

div{
  width:50px;
  height:20px;
  
}
#container{
  border:5px solid black;
  width:400px;
  height:200px;  
}

#a{
  background-color:red;
  float: left;  
}
#b{
  background-color:blue;
  float: left;
  clear: left;
}
#c{
  background-color:green;
  float: right;
}
#d{
  background-color:orange;
  float: right;
  clear: right;
}
#e{
  background-color:black;
  float: right;
  clear: right;
}

<div id="container">

<div id="a">
</div>
<div id="b">
</div >
<div id="c">
</div>
<div id="d">
</div>
<div id="e">
</div>

</div>

下面的图像是最终结果,你可以看到,右边的元素不是从顶部位置开始.顶部有一个砖块空间.这是为什么 ？逻辑是什么？

Answer 1

浮子不会自动到达容器的顶部。红色元素占据了左边的位置。蓝色元素也向左浮动，但它在左侧被清除，因此它被推到下一行。然后你就有了向右浮动的绿色元素，因为蓝色在左侧被清除，而不是在右侧，所以它占据了同一行右侧的位置。

简而言之，它漂浮在最近的可用位置，而不是最顶层。

我希望我已经说得足够清楚了，但如果仍然令人困惑，请告诉我。