Различные способы применения CSS-свойства clear к float-блокам без использования дополнительной разметки
30 января 2008
Данная заметка является переводом.
Оригинал: Роберт Ньюман, http://www.robertnyman.com/
Используя CSS-свойство float вы наверняка сталкивались с весьма интересным его влиянием на последующее содержимое страницы. В этой заметке я расскажу вам, как применить свойство clear к float-блокам без использования какой-либо дополнительной разметки.
Решить данную задачу можно путём применения различных свойств к элементу-контейнеру, содержащему float-блоки. Существуют три подхода:
Применить float к элементу-контейнеру.
Применить overflow: hidden к элементу-контейнеру.
Генерировать содержимое используя CSS-псевдо-класс :after.
Примение float к элементу-контейнеру
Если вы примените свойство float к контейнеру, он охватит все лежащие в нём элементы. Побочным эффектом будет присвоение float ещё одному элементу, который должен вести себя как обычный блок. Эта проблема решается путём задания ширины контейнера в 100%. Таким образом появляется разрыв строки сразу же за контейнером.
.container-with-float{ float: left; width: 100%; }
Недостатки:
100% ширина может не позволить выставить нужный padding.
В некоторых случаях в IE6 снизу появляется дополнительный margin.
Применение overflow: hidden к элементу-контейнеру
После применения overflow: hidden контейнер примет высоту содержащихся в нём элементов.
.container-with-overflow{ overflow: hidden; /* Используйте height: 1%; или zoom: для включения hasLayout в IE 6. Я советую выносить нижеследующую строку в отдельный файл и подключать используя conditional comments. */ height: 1%; }
Недостатки:
Если вам нужна автоматически подстраиваемая высота, может возникнуть ситуация, когда overflow может не соответствовать желаемому поведению блока. В этом случае рекомендуется попробовать применить overflow-x: hidden и/или overflow-y: hidden.
Необходимо использовать height: 1%; или zoom: для включения hasLayout в IE 6. Я советую выносить нижеследующую строку в отдельный файл и подключать используя conditional comments.
Генерация содержимого с использованием CSS
Альтернативой является использование CSS-псевдо-класса :after для генерации содержимого за элементом-контейнером, которое применит свойство clear, сокрыв себя. Лично мне не нравится такой подход т.к. он генерирует содержимое, которого вообще-то не должно было быть.
.container-with-generated-content{ /* Необходимо для включения hasLayout в IE 6 и IE 7! Я советую выносить нижеследующую строку в отдельный файл и подключать используя conditional comments. */ height: 1%; } .container-with-generated-content:after{ content: '.'; display: block; height: 0; clear: both; visibility: hidden; }
Недостатки:
Как IE 6 так и IE 7 не поддерживают псевдо-класс :after pseudo-class, поэтому вам придётся включить для них hasLayout. Замечу, что в IE 7 hasLayout включается тем же способом.
Данный метод генерирует содержимое, не представляющее никакой семантической ценности.
Небольшая тестовая страничка
Я создал небольшую тестовую страничку, где продемонстрированы все три метода решения данной проблемы. Пробуйте и дайте знать, если что не так!
Используете другое решение? Расскажите о нём!
Комментарии RSS по email OK
Спасибо, воспользовался третьим способом. Очень элегантно. Честно говоря раньше не слышал о псевдоклассе :after.
неописуемое спасибо за оверфлоу!!
А как же overflow:auto
Самое плохое что псевдокласс :after не работает в ие6...
Респект! Второй способ - то, что надо!