明确的元素：两边都有浮动的兄弟元素

我的理解是，明确的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

明确的元素：两边都有浮动的兄弟元素

回答

相关问题