Запрет на обтекание float’ов

На данном примере мы рассмотрим, как реализовать запрет на обтекание определенного элемента, к которому применено правило float. Нашей задачей является создание анонса новости. Макет выглядит следующим образом:

Поскольку мы уже сошлись на отказе от таблиц в пользу семантики, нам потребуется минимум html-кода:

<div class="announce">
<img src="pic.gif" alt="" />
<h2><a href="#">Россияне помогли</a></h2>
<p>Полиция турецкого города Измир сообщила об аресте 17 участников группировки, занимавшейся мошенничеством и рассылкой вирусов в Сети.
Арест произошел после того, как местные полицейские выяснили, что трое русских хакеров отправили в общей сложности миллион писем с
вирусами и получили доступ к банковским счетам многих жителей Турции.</p>
</div>

Зададим картинке float, чтобы прижать ее налево и соответствующие макету поля:

.announce img {
float:left;
margin:0 10px 10px 0;
}

К сожалению, текст обтекает картинку, а это совсем не то, что нам требуется по условию задачи. Чтобы запретить обтекание применим дополнительные стили к тексту:

style.css:

.announce p {
overflow:hidden;
}

ie.css:

.announce p {
zoom:1; /* Для IE 7 */
}
* HTML .announce p {
height:1%; /* Для IE 5,6 */
}

Voila!

Внимательный читатель безусловно заметит, что для реализации задачи мы воспользовались правилами, указывающими Explorer’у на hasLayout. Таким образов еще раз показав их полезность.

h++p://htmlbook.ru/samlayout/blochnaya-verstka/plavayushchie-elementy
h++p://shpargalkablog.ru/2011/04/css-nalozhenie.html