Css 元素的两侧都有浮动的兄弟元素

我的理解是，一个div具有明确的含义：两者都有；不会在其两侧放置任何浮动同级div。在这个例子中，我有3个同级的左浮动div，它们位于一个带有overflow:auto的容器div中。有足够的空间让他们并排在一起

链接到下面的jsfiddle

当我将clear应用于中间div时，它会将其移动到下一行（如预期的那样），但是它右侧的div也会向下移动，并保持在其右侧，尽管该区域已被清除。我希望每个部门都有一条新的线路

更进一步，如果我只是补充清楚：对；对于中间的div，它保持在原来的位置（与左边的div保持一致，正如预期的那样），右边的div也保持在它旁边。我原以为正确的部门会换一个新的部门

这种行为似乎与clear通过防止浮动兄弟元素彼此相邻而应该实现的目标相矛盾。有人能解释一下吗

请点击此处：

HTML

---

clear

仅适用于您所应用的元素之前的元素

clear

clear CSS属性指定一个元素是可以位于它前面的浮动元素旁边，还是必须在它们下面向下移动（清除）。clear属性适用于浮动和非浮动元素

而

左

或

右

（或

两个

）值表示上一个元素上的浮动方向。因此，在这里，您可以在中间div上清除的唯一浮动是它前面的浮动，并且该元素被向左浮动，因此

clear:left

是您可以使用的所有会影响布局的浮动<代码>清除：对在您的示例中不起任何作用

如果中间一个div之前有两个div，其中一个向左浮动，另一个向右浮动，则可以使用

clear:left

或

clear:right

（或

clear:both

）来影响布局

 <div class="container">
    <div class="left">Left Div<br>float: left; </div>
    <div class="middle">Middle Div<br>float: left; clear:both; </div>
    <div class="right">Right Div<br> float:left </div>
 </div>

.container {
   width:300px;
   overflow:auto;
   border:solid 2px black;
}

.container > div {
   width:90px; height:90px;
   border:solid 1px red;
   background:grey;
   float:left;
   color:white;
}

.middle {
   clear:both;
}