Question

我无法弄清楚在这种情况下该怎么做。当我有两个div向右浮动（带有clear：right），然后是一个向左浮动的div，我希望左浮动的div在顶部向上（与第一个右浮动的div一致），但它取而代之的是第二个div。这是一个jsfiddle：

http://jsfiddle.net/jeremymoritz/78fk9Lgz/

<div class="red right"></div>
<div class="blue right"></div>
<p>Notice how the green floated-left divs are below the red div.  Why is that?</p>
<ul>
    <li><div class="green left"></div>1st List Item</li>
    <li><div class="green left"></div>2nd List Item</li>
    <li><div class="green left"></div>3rd List Item</li>
    <li><div class="green left"></div>4th List Item</li>
</ul>

提前感谢您的帮助！

Answer 1

来自spec：

浮动框的外部顶部不得高于源文档中较早的元素生成的任何块或浮动框的外部顶部。

在这种情况下，你的右浮动在你的左浮动之前在源中，所以你的左浮动不允许高于第二右浮动（在源中靠近它的那个）。因为第二个元素清除了第一个元素，所以任何后续的元素都会间接受到影响。这与间隙方向无关，因为间隙不会改变后续浮子的行为。

但是，如果你根本不浮动左边的元素，那么右边的浮动会忽略它，并允许它作为正常流动的一部分尽可能高地上升。

Answer 2

在与“浮动”元素相关时，您需要更加小心地使用“清除”的频率。尝试将颜色div放在包装器中：

<div class="right">
  <div class="red">
  <div class="blue">
</div>

Answer 3

试试这个：

<div class="red right"></div>
<div class="green left"></div>
<div class="blue right"></div>

绿色div在下一行左侧浮动，因为它位于标记中的蓝色div之后。

Answer 4

嗯，你不是说你能做什么，什么不能改变。看起来你只能改变CSS，但同时你不说为什么你有这些属性，因为显而易见的答案是让你的CSS像：

.right {float: right; }
.left {float: left; }

基本上，请记住并定义是否要清除浮动。如果你想要清除浮子，那么你可以使用一些绝对定位。丑陋但可以工作。

然后，你的问题的答案是清除浮动，你正在观察的行为正是你对你所做的所期望的。

以防万一，请阅读CLEAR PROPERTY页面，以便了解其工作原理。您案件的相关部分：

当应用于非浮动块时，它会移动边框的边缘   元素向下，直到它低于所有相关浮点数的边缘。   这种运动（当它发生时）导致边缘坍塌不会发生。

当应用于浮动元素时，它会移动边缘   所有相关浮标的边缘下方的元素。这影响了   后来漂浮的位置，因为以后的漂浮不能定位   比以前更高。

与要清除相关的浮动是较早的浮动   在相同的块格式化上下文中。

Answer 5

从第三个div中删除左类，它应该可以正常工作

class="green"

http://jsfiddle.net/Tudor1201/78fk9Lgz/3/

Answer 6

使用clear：两种颜色均为蓝色。

    <div class="red right"></div>
    <div class="blue right"></div>
    <div class="clear"></div>
    <div class="green left"></div>

Answer 7

您可以使用float:top。试试这个 CSS ：

div {
width: 80px;
height: 100px;
}
.red {background: red;}
.blue {background: blue;}
.green {background: green;}
.purple {background: purple;}
.right {float: right; clear: right;}
.left {float: top;clear: left;}

<强> Fiddle

左右浮动：左侧div低于右侧div

7 个答案: