«ясно: оба» слишком много очищают.Это нормальное поведение или это ошибка браузера?

Question

У меня есть следующий код: http://jsfiddle.net/agLap/

Проблема в том, что я хочу, чтобы желтый флажок появился внутри зеленого прямоугольника, но под 2 другими прямоугольниками.

Так что я делаю

clear: both;

на желтом поле. Но это очищает слишком много . Это также очищает красный навигационный div. И это даже не в этой коробке.

Должно ли это быть так, как работает "clear: both" или это ошибка браузера?

Answer 1

Проверьте это JSFiddle, я думаю, что вы хотите: JSFiddle : http://jsfiddle.net/2Brae/4/.

• Вы перемещаетесь влево, что делает это.
• Затем вы хотите поместить содержимое div справа от этой навигации.
• Установите свои высоты для ваших внутренних диванов
• Затем под всеми вашими поплавками используйте <div class="clear"></div>, чтобы очистить всплывающие элементы.

Answer 2

7 лет спустя (с немного лучшими навыками работы с CSS :-)) я нашел хорошее решение своей проблемы: http://jsfiddle.net/kzjyfLto/

Просто замените

margin-left: 100px;

на

float: left;

Это делает блок контента привязанным к блоку навигации и, кажется, создает чистый лист для контента блока контента.

Answer 3

• clear: both; очищает как левый, так и правый;
• clear: left; очищает левый;
• clear: right; очищает правый.

Полностью,да - если вы очищаете влево, он очищает все, что всплыло влево.

Хотя есть способы обойти это.
Если вы очистите внутри плавающего контейнера, он не очистит поплавки вне этого контейнера -попробуйте переместить ваш .content контейнер.

---

Эта статья, вероятно, вам пригодится: http://www.alistapart.com/articles/css-floats-101/

Некоторое расширенное чтение - спецификация: http://www.w3.org/TR/CSS21/visuren.html#float-rules