明確的元素：兩邊都有浮動的兄弟元素

我的理解是，明確的div：兩者;沒有任何浮動的兄弟姐妹位於它的任何一側。在這個例子中，我有3個兄弟，在一個容器div中留下浮動div，其中overflow：auto。有足夠的空間讓所有人並肩而坐。明確的元素：兩邊都有浮動的兄弟元素

鏈接到下面的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; 
}

來源

2017-03-24 James Finn

clear只適用於你之前已經申請clear的元素的元素。

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

將澄清的CSS屬性指定的元素是否就能靠近浮動它之前或者必須向下移動元件（清除）下方。 clear屬性適用於浮動和非浮動元素。

而left或right（或both）值是指在浮子上一個元素上的方向。因此，在這裏，您可以在中間div上清除的唯一浮點數就是前一個浮點數，並且該元素向左浮動，因此clear: left是您可以使用的所有會影響佈局的元素。在你的例子中，clear: right不會做任何事情。

如果在中間位置之前有2個div，而其中一個位於左側，另一個右側，則可以使用clear: left或clear: right（或clear: both）來影響佈局。

來源

2017-03-24 00:51:53

明確的元素：兩邊都有浮動的兄弟元素

回答

相關問題