为什么'clear：left'也会清除right？

Question

我一直在努力让 CSS 浮动工作（在我的脑海中）。

请注意以下示例：

<style type="text/css">
    div.container {
        width:500px;
    }
    div.left {
        float:left;
        clear:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="left">leftdata 1</div>
    <div class="left">leftdata 2</div>
    <div class="right">rightdata 1</div>
    <div class="right">rightdata 2</div>
    <div class="right">rightdata 3</div>
    <div class="right">rightdata 4</div>
</div>

这将给出以下输出：

+-------------------------------------------------- ------------------+ |左数据 1 | |左数据 2 右数据 1 右数据 2 右数据 3 右数据 4 | | | +-------------------------------------------------- ------------------+

但是我期待这个：

+-------------------------------------------------- ------------------+ |左数据 1 右数据 1 右数据 2 右数据 3 右数据 4 | |左数据 2 | | | +-------------------------------------------------- ------------------+

为什么清楚：左；也清零了吧？

---

我的目标：

我只想添加一个 clear:right;到标有 class: right 的 DIV。这应该会产生以下结果：

<style type="text/css">
    div.left {float:left;clear:left;}
    div.right {float:right;clear:right;}
</style>

+-------------------------------------------------- ------------------+ |左数据 1 右数据 1 | |左数据 2 右数据 2 | |右数据 3 | |右数据 4 | +-------------------------------------------------- ------------------+

Answer 1

在您的第一个示例中，rightdata-div 放置在左侧的下方，因为它们稍后会出现在文档中。将它们放在首位，您就会得到预期的结果。

或者您可以尝试以下方式：

<style type="text/css">
  div.left {
    float: left;
  }

  div.right {
    float: right;

  }
  div.container {
    width:500px;
    overflow: auto; /* to make sure .container expands vertically */
  }

<div class="container">
  <div class="left">
    <div>leftdata 1</div>
    <div>leftdata 2</div>
  </div>
  <div class="right">
    <div>rightdata 1</div>
    <div>rightdata 2</div>
    <div>rightdata 3</div>
    <div>rightdata 4</div>
  </div>
</div>

Answer 2

在 CSS 中，出于某些愚蠢的原因，放置浮动 div 的顺序很重要。如果您将

放在第一个（而不是把左边的放在第一个），那么不会是右边那个额外的换行符。

另一件事：我认为任何人都不应该永远使用css的clear命令。为什么？因为它可能会受到其他周围浮动元素的影响。换句话说，clear:both 不仅为当前元素中的浮动元素清除空间，它还为页面上的每个浮动元素清除空间。

更好的解决方案是使用overflow:auto;

这里有一些代码可以满足你的要求：

<style type="text/css">
    div.container {
        width:500px;
        overflow:auto;
    }
    div.left {
        float:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="right">rightdata 1</div>
    <div class="left">leftdata 1</div>
    <br>
    <div class="right">rightdata 2</div>
    <div class="left">leftdata 2</div>
    <br>
    <div class="right">rightdata 3</div>
    <br>
    <div class="right">rightdata 4</div>
</div>

编辑：实际上，请注意，在这种情况下，clear 和 overflow:auto 都不是生成leftdata/rightdata div 的配置所必需的，但是如果你想要容器div，它们是必需的展开到 div 的高度。如果没有 clear 或 overflow:auto，div 的高度将不会扩展以适应它包含的浮动 div 的高度。

Answer 3

<style type="text/css">
    div.left {float:left;}
    div.right {float:right;}
    br.clear{clear:both;}
</style>

<div class="container">
    <div class="left">
         <div> data 1 </div>
         <div> data 2 </div>
         <div> data 3 </div>
    </div>
    <div class="right">
         <div> right data 1 </div>
         <div> right data 2 </div>
         <div> right data 3 </div>
    </div>
    <br class="clear" />
</div>

Answer 4

我认为你最好的选择是：

+--------------------------------------------------------------------+
|+------------+                                       +-------------+|
|| leftdata 1 |                                       | rightdata 1 ||
|| leftdata 2 |                                       | rightdata 2 ||
|+------------+                                       | rightdata 3 ||
|                                                     | rightdata 4 ||
|                                                     +-------------+|
+--------------------------------------------------------------------+

编辑：就像 john misoskian 发布的代码 ^^

Answer 5

回答你的问题，

clear:left

正在向左清理。如果你有一个 float:left，clear:left 会清除它。我同意其他人的观点，仅 float:left 和 float:right 并不能真正为您提供列格式。