Продолжу эстафету, начатую автором блога cuprum.name, в которой эстафетостартер ( :) предлагает блогерам поделиться со своими читателями переводом интересных зарубежных статей из своего RSS-ридера.

Отмечу сразу, что переводом мой текст можно будет назвать лишь условно, скорее это будут свои мысли, основанные на чужой статье. А оригинал вы сможете найти здесь.

Сейчас в разметке большинства сайтов, в той или иной мере, используется подход с применением float, для «лечения» которого верстальщики применяют разные подходы (всем ведь известно про схлопывающийся контейнер для блоков с float, нарушение потока для последующих элементов разметки, и проблемы, связанные с этим?).

Из часто встречающихся решений для очистки плавающих блоков можно увидеть (кратко пройдёмся по всем методам):

1. Метод с дополнительным <div style="clear:both"></div>

Который (<div>) помещается в тот же контейнер, в котором есть плавающие блоки, непосредственно после них. Позволяет контролировать плавающие элементы относительно последующей разметки. Например, не позволит следующими за плавающей картинкой заголовкам, спискам, абзацам и т.д, наползать на неё.

Негибкий, в плане, что всегда нужно вмешиваться в HTML-код и создавать лишний пустой блок в разметке.

2. Метод с position: relative

Позволяет «вернуть» высоту и видимость фона родительского блока, относительно плавающего, с помощью свойства position: relative.

Основная сложность метода в том, что такой подход трудно контролировать в сложной разметке, если родителей для элемента с float очень много. И для всех придется дополнительно прописывать CSS-свойство position: relative. Ест много времени верстальщика и требует усиленного тестирования. Поэтому, лучше сразу забыть про этот способ.

3. Метод overflow: hidden

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

Суть метода в том, что родителю плавающего блока добавляется свойство overflow: hidden. Преимущество в том, что по сравнению с предыдущим способом, можно вылечить поток всего лишь одной строкой.

Правда, требуется дополнительный «костыль» для IE6: дополнительно включаем hasLayout с помощью zoom: 1, или, если требуется валидность, height: 1%.

Весь код в этом случае выглядит примерно так:

1
2
3
4
5
6

#container {
    overflow: hidden;
}
* html #container {
    height:1%;
}

Несмотря на кажущуюся простоту, overflow: hidden иногда не годитcя, если в верстке нужно использовать элементы с отрицательным margin (попробуйте прицепить вебдванольный стикер в такой блок), есть проблемы с ссылками-якорями в Opera (об этом я расскажу в следующий раз), и способен преподнести сюрпризы, как в этом демо (два нижних примера).

Если есть ограничения, значит метод уже не универсальный.

4. Самоочистка для плавающих блоков

Давно известный (да, я не сделал громких откыртий в этом посте!), но мало распространённый метод, основанный на применении к плавающему блоку свойства content: after, выводящему дополнительный контент (текст, точка или пробел) после него, к которому применяется display: block, чтобы сделать его блочным элементом с очисткой clear: both, и одновременно невидимым с помощью visibility: hidden…

В общем, лучше сразу смотрите код, который недавно обновился и больше не поддерживает устаревший IE/Mac:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.floatElement:after {
	visibility: hidden;
	display: block;
	clear: both;
	content: " ";
	height: 0;
}
/* хаки для IE6,7 */
* html .floatElement {
	height: 1%;
}
*:first-child+html .floatElement {
	min-height: 1px;
}

Судя по той же демке (пример 2), способ избавит вас (как минимум :) от проблем с тенью в CSS3.

Способ более универсальный и гибкий, по сравнению с первыми двумя, и позволяет избежать проблем, связанных с «обрезкой» overflow: hidden и просто просится занять свое место в вашем личном CSS-фреймворке. Кроме того, это единственный метод, который применяется непосредственно к плавающему элементу, а не к его родителю.

Лучше всего его использовать, создав отдельный класс в стилевом листе для плавающих элементов, как, например, .group в статье-источнике мыслей или книге Дэна Седерхольма «Handcrafted CSS».

Дополнительно про float можно почитать на designformasters.info

* * *

Участники эстафеты:

• cuprum.name — Работа с цветовой моделью RGBA
• rotorweb.ru — Скажем прощай overflow: hidden!
• dreamhelg.ru — Фантастическая CSS3 лайтбокс галерея с помощью jQuery
• список cо временем пополнится…

* * *

На этом всё, передаю эстафету Сергею М. (iskariot.ru), Виталию (codeisart.ru) и Насте (mannodesign.com).

Кроме того, чтобы эстафета получила активное развитие (или я кого-то забыл пригласить), предлагаю присоединиться, если вы ведёте блог на смежную тему, имеете в своем активе не ниже ста RSS-подписчиков и способны выполнить все условия эстафеты. Присоединяйтесь!

* * *

Теги: CSS, overflow: hidden, XHTML/CSS-верстка, Верстка.

Категория: XHTML/CSS верстка, Мысли вслух, Полезности.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:

• подпишитесь на обновления по RSS
• получайте новые статьи на E-mail
• добавьте в Twitter: Скажем прощай oveflow: hidden!
• добавьте статью в закладки:

* * *

Статьи по теме:

• Таблица соответствия размеров шрифтов в CSS
• Больше, больше эффектов c CSS3!
• Баннер-уголок на jQuery
• Как добавить разные иконки к пунктам меню, используя только CSS
• Практические примеры анимации и эффектов в CSS3