Применение автовыравнивания плавающих элементов


Вы хотите, чтобы плавающий элемент не накладывался на остальной контент независимо от наличия других HTML-элементов.
Сначала рассмотрим вариант, в котором элемент float накладывается на часть макета, как показано на рис. 2.35.
<div>
<img src^”schmitt-csscookbook.jpg” alt=”cover” />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat...
</p>
</div>
Затем зададим правила CSS, например, такие:
div {
border: lpx solid black; padding: 25px;
}
img {
border-right: lpx solid #999; border-bottom: lpx solid #999; float: left; padding: lpx; .
}
P (
float: right; width: 87%;
}

Для того чтобы заставить границу элемента div охватывать плавающие объекты, используйте метод вертикального автовыравнивания плавающих объектов (self-clearing float).
Сначала задайте правила CSS:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
/* CSS rule for IE6 */
* html .clearfix { height: 1%;
}
/* CSS rule for IE7 */
*:first-child+html .clearfix { min-height: lpx;Затем для родительского элемента div добавьте селектор класса со значением ciearfix (рис. 2.36):
<div class="clearfix">
<img src="schmitt-csscookbook.jpg" alt="cover" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat...
</p>
</div>
Метод вертикального выравнивания, учитывает присутствие дополнительного элемента, следующего сразу после плавающего объекта.
Другой метод, применяемый Web-разработчиками, состоит во вставке в разметку после плавающего объекта элемента div или ьг и последующем задании свойства clear этого элемента:
<div>
cimg src="schmitt-csscookbook.jpg" alt="cover" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat...
</p>
<div style="clear: both;"></div>
</div>
Если к Web-документу или документам прикладывают руки многие, практически невозможно быть уверенным в том, что такие подпорки будут вставляться всеми единообразно и согласованно.



Правельные рецепты CSS