css - 你能帮我理解这个奇怪的 float 问题吗？

Question

我正在尝试学习 html/css，但现在我无法理解 float 的工作原理。

我有以下问题:当红色 div 右对齐时，布局是我想要的。但是，当我将它向左对齐时，棕色的 div 会移到底部。

谁能解释为什么会这样？

我在 jsfiddle 设置了一个示例

<div id="container" style="width:300px;height="300px";float:right">
<div id="yellow" style="background-color:yellow;height:200px;width:100px;float:left;">yellow</div>
<div id="green" style="background-color:green;height:100px;width:100px;float:left;">green</div>
<div id="red" style="background-color:red;height:200px;width:100px;float:right;">red</div>
<div id="brown" style="background-color:brown;height:100px;width:100px;float:left;">brown</div>
</div>

Answer 1

从您的 jsfiddle 中解释 brown div 行为的好方法 http://jsfiddle.net/luisse/uX42F/ (由于某种未知原因，在我的例子中它是灰色的=))是绘制它:)

绘制 1 和 2

想象一下，右侧最后一个 float 的左侧元素创建了想象线，您不能将任何左侧 float 元素放在该线下方(如果您使用边距和位置就可以，但我们只关注 float )。

好的，我们在 draw 2 和 draw 3 之间遗漏了一些东西，如果 div 2 和 3 的高度相同，div 4 将位于 div 2 的顶部:)

(右边 float 的 div 从右到左放置，左边的最后一个 div 设置“想象线”......就像在镜子里看到的这个例子 :P )

绘制 3

当 div 3 比 div 2 短时，div 4 位于它的顶部，现在 div 4 是设置“我们的想象”行的元素，现在放置 5 div。

画 4

我们在 div 3 上设置 float 发生了什么？

div 3 不是最后 float 的左元素，现在行由 div 2 设置，这就是为什么灰色 div 位于顶部 od div 2

当我们混合左右浮动 div 时，情况会变得更加复杂，但使用它是一种很好的做法。

为了避免这种行为，最好先创建 3 列并在其中放置 div，这会让您的生活更轻松，尤其是当您有更多“小盒子”时。

<div class="column">
    <div class="box">1</div>
    <div class="box">2</div>
</div>

<div class="column">
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

<div class="column">
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
</div>

http://jsfiddle.net/uX42F/5/

希望对您有所帮助。