Почему «clear:left» также очищает право?

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

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

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

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

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

В CSS, по какой-то глупой причине, важно, в каком порядке вы помещаете плавающие элементы div. Если вы добавляете < div class = " right " > в первую очередь (вместо того, чтобы ставить левые в первую очередь), тогда справа не будет лишней новой строки.

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

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

Answer 4

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

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

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

Answer 5

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

clear:left

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