float элемент выходит за нижнюю границу не float элемента

[Altex]

Есть проблема.

У меня есть div, в котором может находится любой текст, картинки, и вс? что угодно, так как это блок новостей, и администратор может размещать свою новость тут. Предположим, что новостной контент состоит из картинки и текста

<div>
<p><img src="test.jpg" alt="" />some text here</p>
</div>

Но это не самое красивое размещение текста относительно картинки, и администратор решает картинку сделать обтекаемой справа:

<div>
<p><img src="test.jpg" alt="" align="left"/>some text here</p>
</div>

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

Немного поэксперементировав пришло не самое красивое решение - добавить float:left;width:100% к диву, float- чтобы картинка растягивала див, а ширину - чтобы див выглядел так же, как было без float.

<div style="border: 1px solid red;float:left;width:100%">
<img src="test.jpg" alt="" align="left" />
<p>some text here</p>
</div>

Это решение работает, но с одной стороны мне не понятно, почему картинка выезжает за края дива в первом варианте, а с другой стороны не понятно, какие ещ? могут быть подводные камни в зависимости от того, что будет внутри div'а.

Поделитесь информацией, или ссылкой на информацию, которая помогла бы мне разобраться в этом вопросе.

Заранее спасибо.

[Azadi]

Clear для плавающих блоков

[Altex]

Спасибо, то что нужно! :-)