«Очистка» плавающих блоков

В блоге «Life Style» полезная статья «„Очистка“ плавающих блоков». Новое решение старой проблемы — плавающие блоки не растягивают внешний контейнер, которая обычно решается добавлением дополнительного элемента с «clear: both». Вкратце, рецепт выглядит следующим способом, но рекомендую взглянуть и на полную статью:

div.container {
	overflow: auto;
	width: 100%
}

В комментариях подсказали ссылку на первоисточник: http://www.quirksmode.org/css/clearing.html.

27 ноября 2007 14:52

webdev, css

Alisey (alisey.myopenid.com)
27 ноября 2007, 23:15

А! Это работает.
Знал один извращённый способ добиться того же эффекта, но он очень нестабилен.
Там используется :after
http://www.positioniseverythin~~g.net/ea~~syclearing.html

Недавно нашёл очень полезное, как исправить в IE6 удвоение margin для плавающих блоков. Нужно такому блоку указать display: inline. Не помню где читал.

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)

Подсказка по написанию комментария

В комментариях можно применять следующую специальную разметку:

слово, обрамлённое в «звёздочки» выделяется *жирным*
ссылка становится ссылкой: http://bolknote.ru
ссылка в скобках также становится ссылкой, закрывающая скобка не захватывается: (http://bolknote.ru)
каждую строку цитаты следует начинать со знака «больше»:
> это цитата
> из двух строк
можно вставить картинку, залитую на один из сервисов: «Яндекс.Фотки», «Фликр» или «Пикплз». Для этого нужно вставить на страницу полный адрес вашей картинки на сервисе, он превратится в картинку:

http://fotki.yandex.ru/users/bolknote/view/274311?page=3