クリアを持つ要素：両方とも、その両側に浮動兄弟要素を持っています。

Question

私の理解は、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; 
} 

Answer 1

clearはあなたがclearを適用した要素の前の要素に適用されます。

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

明確なCSSプロパティは、要素がそれに先行するか、その下に（クリア）下に移動する必要があります浮動要素の隣にできるかどうかを指定します。 clearプロパティは、フローティング要素とフローティング要素の両方に適用されます。

そしてleft又はright（又はboth）の値は、前の要素にフロートの方向を指します。そこでここでは、中央のdivでクリアできる浮動小数点だけがそれに先行する浮動小数点であり、その要素が左に浮かんでいたので、レイアウトに影響するのはclear: leftです。 clear: rightはあなたの例で何もしません。

2つの真ん中の前にdivタグ、および1つが左浮かべ、およびその他の権利があった場合は、レイアウトに影響するclear: leftまたはclear: right（またはclear: both）を使用することができます。