Отступ после блока с clear: both

[pav8909]

Имеется контейнер, в котором несколько блоков с float: left. В завершении, чтобы убрать обтекание ставлю блок с clear: both;

При этом появляется отступ после этого блока, т.е. блок с clear: both; растягивает контейнер по высоте.

С подобнымстолкнулся впервые, исправить смог только overflow: hidden; у контейнера.

Пример кода:

<div style="width:100%;overflow:hidden; ">
<div style="width: 200px; background: red; margin: 0px 20px; float: left;">test test test</div>
<div style="width: 200px; background: red; margin: 0px 20px; float: left;">test test test</div>
<div style="width: 200px; background: red; margin: 0px 20px; float: left;">test test test</div>
<div style="clear: both;"></div>
</div>
<div>test test test</div>

Почему так ведеи себя блок с clear: both;?

Edited May 13, 2011 by pav8909

[psywalker]

Всё просто. Контейнер, внутри которого находятся зафлоаченные блоки, схлопывается в ноль, т.е. его высота становится 0px; Далее вставляя блок <div style="clear: both;"></div> внутрь, ты отменяешь у него обтекание, и он располагается под зафлоаченными блоками, и соответсвенно контейнер растягивается до него.

[Temiks]

.

Edited May 13, 2011 by Temiks

[leonid26]

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

<div style="float:right;border:1px solid blue;height:100px;width:100px">

Мешающий блок

</div>

<div style="width:100%;border:1px solid green">

<div style="width: 200px; background: red; margin: 0px 20px; float: left;">test test test</div>

<div style="width: 200px; background: red; margin: 0px 20px; float: left;">test test test</div>

<div style="width: 200px; background: red; margin: 0px 20px; float: left;">test test test</div>

<div style="clear: both;"></div>

</div>

<div>test test test</div>

Edited May 13, 2011 by leonid26

[pav8909]

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

<div style="float:right;border:1px solid blue;height:100px;width:100px">

Мешающий блок

</div>

<div style="width:100%;border:1px solid green">

<div style="width: 200px; background: red; margin: 0px 20px; float: left;">test test test</div>

<div style="width: 200px; background: red; margin: 0px 20px; float: left;">test test test</div>

<div style="width: 200px; background: red; margin: 0px 20px; float: left;">test test test</div>

<div style="clear: both;"></div>

</div>

<div>test test test</div>

Спасибо, понял в чем проблема. В макете сайта левая колонка фиксированной ширины сделана с помощью float: left, поэтому когда я ставлю в шаблоне своего компонента после нескольких плавающих блоков clear: both то все уходит вниз на высоту левой колонки.

Буду думать как с этим бороться, если есть мысли - излагайте.

[tt48]

clear: right;/*?*/

А вообще - хотелось бы поконкретнее: где эта колонка и пр.

Edited May 16, 2011 by tt48