你能帮我理解这个奇怪的浮动问题吗？

时间：2014-01-26 18:30:19

标签： css css-float

我正在尝试学习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>

5 个答案:

答案 0 :(得分：2)

所以我认为有助于消除任何困惑的是看看这里实际发生了什么。当您将一组元素设置为float: left;或float: right;时，您可以将其视为将它们分成两个不同的组。每个组按向左或向右的方式堆叠，如果一个组击中其包含div的边缘，它将正常包裹到下一行。

在你的第一个示例中，红色div是向右浮动的，因此它现在位于它自己的组中，并且不与剩余的浮动左元素交互。这使得棕色div击中容器的边缘，并包裹在绿色元素下面。如果我们扩展容器，你会发现它没有包裹并且位于绿色旁边。

在第二个例子中，红色div现在是该组的一部分。它放在绿色旁边，然后棕色包裹在你的例子中。再次，如果我们扩展包含div，它现在将位于红色块旁边。

<强> EXAMPLE FIDDLE DEMO

答案 1 :(得分：2)

从你的jsfiddle http://jsfiddle.net/luisse/uX42F/解释布朗div的行为的好方法（在我的例子中，由于某些未知的原因，这是灰色的=））是绘制它：）

画1和2

想象一下，右侧最后浮动的左侧元素会创建想象线，您不能将任何左侧浮动元素放置在该线下方（如果您使用边距和位置，则可以，但我们只关注浮点数。）

好的，我们错过了平局2和平局3之间的东西，如果div 2和3是相同的高度div 4将位于div 2的顶部：）

（右浮动的div从右到左放置，左边的最后一个div设置为“想象线”......就像这个例子在镜子里看到的那样：P）

画3

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

画4

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

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

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

float

为了避免这种行为，最好先创建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/

希望它会有所帮助。

答案 2 :(得分：1)

原因很简单！你像这样arrane你的divs： 1-黄色 2-绿色 3-红色 4-棕色 所以优先是先到先得的。你把红色放在棕色之前。所以，如果你将红色对齐，那么棕色的那个会找到一些左对齐的空间！它充满绿色，因为红色现在与不同的prionrity对齐。现在你将红色对齐左边，你的容器有300px，棕色的容器没有一些空间，所以它在红色后掉落！因为红色的优先级为3，而棕色的优先级不允许在红色之前填充空格。 SO：红色的第一个获得第三个100px，棕色的一个下降并填充容器的底部空间。 祝你好运：）

答案 3 :(得分：1)

来自CSS 2.1 section 9.5.1 Positioning the float: the 'float' property：

  

以下是管理浮动行为的准确规则：

     
      
  1. 左浮动框的左外边缘可能不在其包含块的左边缘的左侧。类似的规则适用于右浮动元素。
    2.   
  2. 如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动框，则对于每个此类较早的框，要么当前框的左外边缘必须在右侧早期框的右外边缘，或其顶部必须低于前一个框的底部。类似的规则适用于右浮箱。
    3.   
  3. 左浮动框的右外边缘可能不在其旁边的任何右浮动框的左外边缘的右侧。类似的规则适用于右浮动元素。
    4.   
  4. 浮动框的外顶部可能不高于其包含块的顶部。当浮动发生在两个折叠边距之间时，浮动的位置就好像它有一个空的匿名块父级参与流程。这种父母的位置由保证金折叠部分中的规则定义。
    5.   
  5. 浮动框的外部顶部不得高于源文档中较早的元素生成的任何块或浮动框的外部顶部。
    6.   
  6. 元素浮动框的外部顶部可能不会高于包含由源文档中较早元素生成的框的任何行框的顶部。
    7.   
  7. 左侧浮动框左侧的另一个左浮动框可能没有右边的外边缘到其包含块的右边缘。 （松散地：左边的浮子可能不会在右边缘伸出，除非它已经尽可能地向左边移动。类似的规则适用于右浮动元素。
    8.   
  8. 浮动箱必须尽可能高。
    9.   
  9. 左浮箱必须尽可能地放在左边，右边浮动的箱子尽量放在右边。较高的位置优于远离左/右的位置。
    10.         

    但是在CSS 2.1中，如果在块格式化上下文中，存在一个流入的负垂直边距，使得浮动的位置高于它所处的位置，所有这些负边距都设置为零，浮动是未定义的。

知道了吗？

实际上，您所询问的行为可以通过规则2来解释。将棕色框作为“当前框”，如果红色框左对齐，则它参与“任何左浮动框”源文档中较早的元素“和棕色框必须位于红色框的右侧或下方。如果红色框右对齐，则它不参与，棕色框可以放置得更高。

答案 4 :(得分：0)

我们没有看到你的其他div，但是当你使用float时，div意图被放在一排。所以浮动：右边会把你的div放在右边，下一个放在下面。

相关问题
最新问题