带有 clear:both 的元素在其两侧都有浮动的兄弟元素答案

【问题标题】：Element with clear:both has floating sibling elements on both sides of it带有 clear:both 的元素在其两侧都有浮动的兄弟元素
【发布时间】：2017-03-24 08:51:53
【问题描述】：

我的理解是一个带有 clear:both; 的 div不会在其两侧放置任何浮动兄弟 div。在这个例子中，我有 3 个兄弟，在一个容器 div 内留下浮动 div，带有溢出：auto。有足够的空间让他们所有人并排。

链接到下面的 jsfiddle。

当我将 clear:both 应用到中间 div 时，它会将其移动到下一行（如预期的那样），但它右侧的 div 也会向下移动并保持在其右侧，尽管该区域已被清除。我希望每个 div 都在一个新行上。

如果我只是添加 clear:right; 会更进一步到中间的 div 它仍然在原处（与其左侧的 div 一致 - 正如预期的那样），其右侧的 div 也留在它旁边。尽管正确的 div 会移动到新行，但我会想到。

这种行为似乎与 clear 应该通过防止浮动兄弟元素彼此相邻来实现的目的相矛盾。谁能解释一下？

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;
}

【问题讨论】：

标签： css css-float

【解决方案1】：

clear 仅适用于您已应用 clear 的元素之前的元素。

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

clear CSS 属性指定一个元素是可以紧挨着它之前的浮动元素还是必须向下移动（清除）到它们下方。 clear 属性适用于浮动和非浮动元素。

而left 或right（或both）值指的是前一个元素上浮动的方向。所以在这里，您可以在中间 div 上清除的唯一浮动是它之前的那个，并且该元素向左浮动，因此您可以使用 clear: left 来影响布局。 clear: right 在您的示例中不会做任何事情。

如果中间的 div 之前有 2 个 div，一个向左浮动，另一个向右浮动，那么您可以使用 clear: left 或 clear: right（或 clear: both）来影响布局。

【讨论】：