<rmcreative>

RSS

Различные способы применения 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

  1. №1719
    hombre
    hombre 11 июля 2009 г., 23:52:10

    Спасибо, воспользовался третьим способом. Очень элегантно. Честно говоря раньше не слышал о псевдоклассе :after.

  2. №2242
    макс
    макс 11 февр. 2010 г., 15:02:59

    неописуемое спасибо за оверфлоу!!

  3. №3157
    Weee
    Weee 26 сент. 2010 г., 1:44:39

    А как же overflow:auto

  4. №3959
    Виктор
    Виктор 24 февр. 2011 г., 16:02:02

    Самое плохое что псевдокласс :after не работает в ие6...

  5. №4406
    Виктор
    Виктор 16 апр. 2011 г., 16:00:31

    Респект! Второй способ - то, что надо!

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.