Свойство clear

Вместе со свойством float часто также используется свойство clear. Мы видели, что текст может обтекать плавающее изображение. Если говорить об изображениях, иногда требуется очистить свойство float. Если текст описания достаточно большой, следующее изображение располагается на новой строке. Однако когда текст описания является коротким, третье плавающее изображение располагается рядом со вторым, так как там есть свободное место.

Поэтому, чтобы исправить ситуацию, требуется добавить элемент div для очистки свойства float и размещения третьего изображения на новой строке. Вот код примера с добавленным div:

<style type="text/css">
p {margin:0 0 10px 0;} /* создает пробелы между элементами */
img {float:left; margin:0 4px 4px 0;}
. clearthefloats {clear;both;}
</style>
</head>
<boby>
<img src="images/oifice_xp.gif" />
<p>
This is a paragraph of text about Microsoft Office XP...
</p>
<img src="images/win_home.gif" />
<P>
This is a paragraph of text about Microsoft Windows XP...
</p>
<div class = nclearthefloats"></div>
<img src="images/win_pro.gif" />
<p>
Now the next image and paragraph
</p>
</body>

Этот новый «очищенный» элемент, добавленный между вторым и третьим абзацем, теперь невидимо располагается под вторым изображением. Так как третье изображение и абзац следуют за очищенным элементом, они располагаются под ним, что нам и требовалось.

Очистка свойства float является важным моментом при создании CSS-разметок. Прежде чем мы начнем использовать float на практике, следует ознакомиться еще с одним свойством - display.




Rambler's Top100