Html Css浮动元素

不久前，一位朋友告诉我，在我的文档中，右浮动的元素应该放在第一位，但我想我误解了他想告诉我的内容，我想知道是否有人能解释为什么如果我先有两个右浮动的div，第一个左浮动的div会被清除，并在第一个右浮动的div之后出现

下面是一个代码片段，它的性能没有我想要的那样好（两个左浮动堆栈和两个右浮动堆栈相邻）

在这里，它可以按照我想要的方式工作，但我必须在文档中移动元素的顺序：

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

很抱歉，如果这个问题已经得到了回答，我相信这是一个简单的问题，我想知道为什么我需要右浮动，左浮动，但对于下一次浮动，右浮动还是左浮动似乎并不重要

---

感谢

事实是：浮动的元素将占用它之前浮动元素剩余的剩余空间。因此，如果两条带子（一条右边，另一条左边）不能连续放置，就无法得到它们的平行线

例如：

如果

otherdiv

也浮动，则无法使

div1

和

div2

水平平行

<div id="div1"></div>
<div id="otherdiv"></div>
<div id="div2"></div>

---

关于浮动的快速教程

我举了几个例子，并提供了一把小提琴

我将逐一评论，以说明这些要素是如何布置的

在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>

但是，要将#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>

示例5-浮点嵌套div
1.
2.
3.
4.

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

---

希望这有帮助。

两个小提琴显示相同的声音result@slacker不知道为什么我的不同；好吧，我一定错过了什么。。。我刚刚尝试将这些示例粘贴到Firefox19.0.02中，但它们看起来不一样。编辑我刚刚在IE 8中尝试过，但是它们看起来是一样的。不，我认为第一小提琴是不正确的。是的，两个JSFIDLE中的代码都是相同的。非常好的解释，谢谢你花时间来做这件事。谢谢！要真正理解浮动，您需要阅读Eric Meyer书中的章节。请投赞成票。祝你一切顺利！不幸的是，我现在不能，但希望其他人会这样做？

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

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

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

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