1

不久前，一位朋友告诉我，正确的浮动元素应该放在我的文档中，但我想我误解了他试图告诉我的内容，我想知道是否有人可以解释为什么如果我首先拥有两个正确的浮动 div第一个左浮动 div 被清除并在第一个右浮动 div 之后上线？

这是一个没有按我想要的那样执行的片段（2 个左右浮动堆栈彼此相邻）

<div style="margin-left: auto; margin-right: auto; height: 600px; border: 1px solid black">
      <div style="width: 200px; height: 200px; background-color: red; float:right;"></div>
      <div style="width: 200px; height: 200px; background-color: green; float:right; clear: right"></div>

      <div style="width: 200px; height: 200px; background-color: yellow; float:left; clear: none"></div>
      <div style="width: 200px; height: 200px; background-color: purple; float:left; clear: left"></div>                   
  </div>

JSfiddle

在这里它可以按我的意愿工作，但我不得不在文档中移动元素的顺序：

<div style="margin-left: auto; margin-right: auto; height: 600px; border: 1px solid black">
      <div style="width: 200px; height: 200px; background-color: red; float:right;"></div>
      <div style="width: 200px; height: 200px; background-color: yellow; float:left; clear: none"></div>

      <div style="width: 200px; height: 200px; background-color: green; float:right; clear: right"></div>          
      <div style="width: 200px; height: 200px; background-color: purple; float:left; clear: left"></div>                   
  </div>

JSFiddle

抱歉，如果这个问题已经得到解答，我确定这是一个简单的问题，我想知道为什么我需要向右浮动，向左浮动，但是对于下一个浮动，左右浮动似乎并不重要第一的。

谢谢

4

2 回答 2

2

关于浮点数的快速教程

我设置了一些示例并在http://jsfiddle.net/audetwebdesign/xJSGZ/提供了一个小提琴

我将依次对每一个进行评论，以说明元素的布局方式。

在 Ex 1 中，没有浮点数，因为每个都是块元素，所以方块一个接一个地堆叠在一起。

<h3>Example 1 - no floats</h3>
<div class="wrapper">
      <div class="square" style="background-color: red;"><b>1</b></div>
      <div class="square" style="background-color: green;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
</div>

在 Ex 2 中，我将 div #2 浮动到右侧。在这种情况下，将 div #2 从文档流中取出并强制向右移动，而 div #3 在 div #1 之后立即流入。

<h3>Example 2 - float right element #2</h3>
<div class="wrapper">
      <div class="square" style="background-color: red;"><b>1</b></div>
      <div class="square" style="background-color: green; float: right;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
</div>

在 Ex 3 中，我将 div #4 浮动到右侧。由于 div #4 在文档流中位于 div #3 之后，因此 div #4 位于其自己的行中。

<h3>Example 3 - float right element #2 and #4</h3>
<div class="wrapper">
      <div class="square" style="background-color: red;"><b>1</b></div>
      <div class="square" style="background-color: green; float: right;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple; float: right;"><b>4</b></div>
</div>

在 Ex 4 中，我将 div #1 和 #2 浮动到右侧。这两个都从流中取出并定位在右侧。以下两个元素，div #3 和 #4 流入。我clear: right在 div #2 中使用强制它开始一个新行。

<h3>Example 4 - float right element #1 and #2</h3>
<div class="wrapper">
      <div class="square" style="background-color: red; float: right;"><b>1</b></div>
      <div class="square" style="background-color: green; float: right; clear: right;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
</div>

但是，要获得左侧的 #1 和 #2 以及右侧的 #3 和 #4，请创建一个内部包装器并将内部包装器 div 分别向左和向右浮动：

<h3>Example 5 -  float nested div's</h3>
<div class="wrapper">
    <div class="inner-wrapper" style="float:left;">
       <div class="square" style="background-color: red;"><b>1</b></div>
       <div class="square" style="background-color: green;"><b>2</b></div>
    </div>
    <div class="inner-wrapper" style="float: right;">
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
    </div>
</div>

这些示例让您了解使用浮动定位元素的灵活性和局限性。元素的顺序确实会有所不同，因为浮动元素会改变浏览器构建页面布局的顺序。

希望这可以帮助。

于 2013-03-27T12:17:27.960 回答
0

事实是：浮动的元素将占用它之前的浮动元素剩余的剩余空间。所以，如果它们不是连续放置的，你就不能得到两个元素（一个右边和另一个左边）的平行。

例子：

div1如果也浮动，您将无法获得div2水平平行otherdiv。

<div id="div1"></div>
<div id="otherdiv"></div>
<div id="div2"></div>
于 2013-03-27T11:04:54.860 回答