Почему делает 'clear:left', также очищает право?
Другие ответы дают довольно краткий ответ на этот вопрос, без одного важного факта: вам не нужно реализовывать комбинатор с фиксированной запятой на любом практическом языке таким замысловатым образом, и это не имеет никакого практического смысла (кроме «посмотрите, я знаю, что Y-комбинатор есть "). Это важная теоретическая концепция, но мало практической ценности.
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>
Думаю, лучше всего сделать что-нибудь вроде:
+--------------------------------------------------------------------+
|+------------+ +-------------+|
|| leftdata 1 | | rightdata 1 ||
|| leftdata 2 | | rightdata 2 ||
|+------------+ | rightdata 3 ||
| | rightdata 4 ||
| +-------------+|
+--------------------------------------------------------------------+
РЕДАКТИРОВАТЬ: например, код, который опубликовал Джон Мисоскиан ^^
Чтобы ответить на ваш вопрос,
clear:left
остается свободным. Если у вас есть float: left , clear: left очищает его. Я согласен со всеми в том, что сами по себе float: left и float: right на самом деле не дадут вам форматирования столбцов.
В вашем первом примере блоки 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>
В CSS по какой-то глупой причине имеет значение, в каком порядке вы размещаете плавающие блоки div. Если вы поместите блоки
Еще одно: я не думаю, что кто-то должен когда-либо использовать команду css clear. Почему? Потому что на него могут влиять другие окружающие плавающие элементы. Другими словами, ясно: оба не просто освобождают пространство для плавающих элементов в текущем элементе, они очищают пространство для каждого плавающего элемента на странице.
Лучшее решение - использовать 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>
Изменить: На самом деле, обратите внимание, что в этой ситуации ни очистка, ни переполнение: auto строго необходимы для создания конфигурации divs leftdata / rightdata, но они необходимы, если вы хотите, чтобы контейнер div расширялся до высоты div. Без clear или overflow: auto высота div не будет увеличиваться, чтобы соответствовать высоте плавающих div, которые он содержит.