0
私の理解は、clearを持つdivです。浮動兄弟divsのいずれかの側に位置することはありません。この例では、3つの兄弟があり、overflow：autoというコンテナdiv内にフローティングdivが残っています。それらのすべてが並んでいる十分な余地があります。クリアを持つ要素：両方とも、その両側に浮動兄弟要素を持っています。
以下のjsfiddleにリンクしてください。
私はクリアを適用します：中間のdivの両方に次の行（期待どおり）に移動しますが、右側のdivも下に移動し、その領域がクリアされているにもかかわらず右側に残ります。私は各部門が新しいラインになると思っています。
さらにより多くの私はちょうど明確追加した場合：右;中央のdivには、それが（左のdivに沿って - 期待通りに）どこに残っていても、その右側のdivもその横にとどまります。私は右のdivが新しい行に移動したが、持っているだろう。
この動作は、互いに横にあることから、フローティング兄弟要素を防止することにより達成することになっている明確なものを矛盾するようです。誰もこれを説明できますか？
ここjsfiddle：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;
}