Почему «очистить: слева» также очищает право?

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>

Это даст следующий вывод:

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

Однако я ожидал этого:

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

Почему ясно: слева; также очистка правильно?

---

Моя цель:

Я хочу только добавить ясность: правильно; к DIV, отмеченным классом: справа. Это должно привести к следующему:

<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

В вашем первом примере div-элементы rightdata размещены под левыми, потому что они появляются позже в документе. Разместите их в первую очередь, и вы получите ожидаемые результаты.

Или вы можете попробовать что-то вроде:

<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. Зачем? Потому что на него могут влиять другие окружающие плавучие элементы. Другими словами, ясно: оба не только очищают пространство для плавающих элементов в элементе currrent, но и очищают пространство для каждого плавающего элемента на странице.

Лучшее решение - переполнение: 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>

Редактировать: На самом деле, обратите внимание, что в этой ситуации ни очистка, ни переполнение: auto строго необходимы для создания конфигурации div-элементов leftdata / rightdata, но они являются необходимыми, если вы хотите, чтобы div контейнера был расширить до высоты дивов. Без очистки или переполнения: auto, высота div не будет увеличиваться, чтобы соответствовать высоте плавающих div, которые он содержит.

Answer 3

Чтобы ответить на ваш вопрос,

clear:left

- это очистка влево. Если у вас есть float: left , clear: left , очищает его. Я согласен со всеми остальными в том, что float: left и float: right в одиночку на самом деле не даст вам форматирование столбца.

Answer 4

Я думаю, что вам лучше всего сделать что-то вроде:

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

РЕДАКТИРОВАТЬ: как код, который опубликовал Джон Мисоскиан ^^

Answer 5

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