元素清晰：两侧都有浮动的兄弟元素

Question

我的理解是一个明确的div：两者;将不会有任何浮动兄弟div位于它的两侧。在这个例子中，我有3个兄弟，左边的浮动div在容器div里面有overflow：auto。他们所有人都有足够的空间并排。

链接到下面的jsfiddle。

当我应用clear时：两者都向中间div移动它到下一行（正如预期的那样）但是它右边的div也向下移动并保持在它的右边，尽管该区域被清除。我希望每个div都在新的一行。

如果我只是添加清楚：右;到中间div它保持原样（与左边的div一致 - 如预期的那样），右边的div也保持在它旁边。虽然正确的div会移动到一个新的行，但我会这样做。

这种行为似乎与通过防止浮动兄弟元素彼此相邻而应该达到的清晰度相矛盾。谁能解释一下呢？

jsfiddle here：https://jsfiddle.net/2tfgwmek/1/

HTML

 <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>

CSS

.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;
}

Answer 1

clear仅适用于您已应用clear的元素之前的元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

  

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

left或right（或both）值指的是前一个元素上浮点的方向。所以在这里，你可以在中间div上清除的唯一浮点数是前面的浮点数，并且该元素向左浮动，因此clear: left是你可以使用的所有会影响布局的。 clear: right在你的例子中没有做任何事情。

如果在中间一个之前有2个div，而另一个在左侧浮动，而另一个在右侧，那么您可以使用clear: left或clear: right（或clear: both）来影响布局。