Css 元素的两侧都有浮动的兄弟元素
我的理解是,一个div具有明确的含义:两者都有;不会在其两侧放置任何浮动同级div。在这个例子中,我有3个同级的左浮动div,它们位于一个带有overflow:auto的容器div中。有足够的空间让他们并排在一起 链接到下面的jsfiddle 当我将clear应用于中间div时,它会将其移动到下一行(如预期的那样),但是它右侧的div也会向下移动,并保持在其右侧,尽管该区域已被清除。我希望每个部门都有一条新的线路 更进一步,如果我只是补充清楚:对;对于中间的div,它保持在原来的位置(与左边的div保持一致,正如预期的那样),右边的div也保持在它旁边。我原以为正确的部门会换一个新的部门 这种行为似乎与clear通过防止浮动兄弟元素彼此相邻而应该实现的目标相矛盾。有人能解释一下吗 请点击此处: HTMLCss 元素的两侧都有浮动的兄弟元素,css,css-float,Css,Css Float,我的理解是,一个div具有明确的含义:两者都有;不会在其两侧放置任何浮动同级div。在这个例子中,我有3个同级的左浮动div,它们位于一个带有overflow:auto的容器div中。有足够的空间让他们并排在一起 链接到下面的jsfiddle 当我将clear应用于中间div时,它会将其移动到下一行(如预期的那样),但是它右侧的div也会向下移动,并保持在其右侧,尽管该区域已被清除。我希望每个部门都有一条新的线路 更进一步,如果我只是补充清楚:对;对于中间的div,它保持在原来的位置(与左边的
clear
仅适用于您所应用的元素之前的元素clear
clear CSS属性指定一个元素是可以位于它前面的浮动元素旁边,还是必须在它们下面向下移动(清除)。clear属性适用于浮动和非浮动元素
而左
或右
(或两个
)值表示上一个元素上的浮动方向。因此,在这里,您可以在中间div上清除的唯一浮动是它前面的浮动,并且该元素被向左浮动,因此clear:left
是您可以使用的所有会影响布局的浮动<代码>清除:对在您的示例中不起任何作用
如果中间一个div之前有两个div,其中一个向左浮动,另一个向右浮动,则可以使用clear:left
或clear:right
(或clear:both
)来影响布局
<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>
.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;
}