html - 为什么 'clear:left' 也正确清除？

Question

我一直在努力让 CSS float 工作(在我的脑海中)。

注意下面的例子:

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

这将给出以下输出:

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

However I was expecting this:

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

Why is clear:left; also clearing right?

---

My goal:

I want to only add a clear:right; to the DIVs marked with class: right. This should produce the following:

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

+--------------------------------------------------------------------+| leftdata 1                                             rightdata 1 || leftdata 2                                             rightdata 2 ||                                                        rightdata 3 ||                                                        rightdata 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>