CSS плавает влево / вправо ясно, проблема: большой разрыв

Question

У меня есть css-страница с «float:right; clear:right» для рекламы и несколькими блоками в основном тексте, который должен отображаться как изображения, используя «float: left». Проблема в том, что основной текстовый блок имеет большой разрыв: они начинают показываться только после рекламных блоков, которые имеют float: right.

вот тестовая страница: http://xahlee.org/js/ex/test_float.html

Я не могу этого понять. Кто-нибудь может объяснить?

Answer 1

Я изо всех сил пытаюсь придумать более подходящие слова, чтобы объяснить почему, чем «это просто так».

Самый простой способ исправить это - заключить два «рекламных блока» в свои собственные div с float: right:

<div style="float: right;">
    <div class="adbox1">adbox1</div>
    <div class="adbox2">adbox2</div>
</div>

Answer 2

промежуток, генерируемый полем тела;

Решение:

body { margin: 0; }

У большинства инструментов сброса CSS есть это правило.

Answer 3

Пробел вызван тем, что вы очистили: прямо на 2-ом рекламном блоке, и тем фактом, что потоковые блоки следуют за рекламными боксами в порядке документов.

Если вы хотите, чтобы поля в нижней части «потока» располагались рядом с абзацами, поместите их непосредственно перед тегом абзаца, который вы хотите, чтобы они плавали дальше.