Перенос плавающих HTML-блоков

Хочу рассказать вам о небольшой хитрости, которую я лично очень часто применяю. При верстке плавающими HTML-блоками (с использованием CSS-стиля float) иногда возникает необходимость принудительно "перенести" определенные блоки на новую строку в независимости от значения стиля float как самих, так и соседних блоков. Для этого может помочь специальный невидимый блок, сформированный следующим образом:
.clearer {
  clear: both;
  display: block;
  font-size: 0;
  line-height: 0;
}
<div class="clearer">&nbsp;</div>
Типичный пример: на сайте встречается div-контейнер, в котором может располагаться самый различный контент, в том числе, различные плавающие элементы:
<div class="article">
  Всякий контент
<div>
Из имени класса понятно, что таким контейнером вполне могут быть оформлены статьи на сайте. В статьях могут встречаться картинки, обтекаемые справа и слева. Чтобы к таким элементам кроме контента ничего лишнего не "липло", в конце содержимого контейнера можно как раз вставить эту заветную заглушку:
<div class="article">
  Всякий контент
 
  <div class="clearer">&nbsp;</div>
<div>

Комментарии

Оставить комментарий »

 
Дмитрий
13 марта 2012, 0:14
#1
 

Я так футер от всего остального отделяю.

vitalik-758153
27 июля 2013, 1:31
#2
 

аха

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий