Clearfix хак популярный способ правильного отображения плавающих блоков, позволяющий не прибегать к помощи таблиц при верстке. Необходимость в нем возникает когда вы начинаете замечать, что высота родительского блока DIV не соответствует содержимому наследников. К примеру вы задумали такую организацию блоков у себя на сайте (для наглядности родительский блок выделен желтым цветом, а дочерние — зеленым и красным):
Для чего написали такую HTML страницу:
и к ней соответствующий CSS файл стилей:
Однако в реальности вы получите такую картинку:
Родительский DIV не обнимает дочерние. То есть не растягивается по высоте входящих в него блоков. И никакой ошибки тут нет, просто в верстке используют плавающие блоки (свойство FLOAT). Плавающие элементы вырываются из текущего потока и создают в родительском контексте между собой собственный. При этом для внешнего потока они не будут иметь размеров. И чтобы родительский DIV учитывал их размер и растягивался по их содержимому необходима небольшая хитрость.
Содержание
- Два способа как растянуть размер родительского DIV по содержимому входящих в него блоков
- Второй способ как заставить родительский div растягиваться по высоте дочернего
- Благодарности
- Об этом стоит всегда помнить
Два способа как растянуть размер родительского DIV по содержимому входящих в него блоков
Раньше я использовал такой дополнительный блок перед закрывающим тегом родительского DIV:
После чего внешний вид страницы соответствовал задуманному:
Второй способ как заставить родительский div растягиваться по высоте дочернего
Можно сделать «самоочищающийся» контейнер через псевдокласс after:
А родительскому блоку добавить соответствующий класс:
Внешний вид страницы так же будет соответствовать задуманной верстке:
Оба способа хорошо работают. И позволяют решить проблему плавающих блоков, чтобы родительский DIV растягивался по высоте содержимого дочерних.
Благодарности
При написании статьи были использованы следующие источники:
О преимуществах div’ной верстки перед табличной — никому наверное рассказывать не надо. Все это уже давно поняли и перешли на них с таблиц. Ну а те кто не перешел — вскоре поймут свои ошибки и это сделают. Но как и в любом занятии — тут также есть свои подводные камни. То дивы ведут себя не так как надо, то не получается сверстать какую нибудь определенную структуру, преград много, а верстальщик всегда один…
Данный пост предназначен скорее для начинающих, но вдруг и профи найдут тут что-то интересненькое. Так что давайте приступим уже к делу!
Об этом стоит всегда помнить
Существует один подход в верстке, которого нужно придерживаться как можно чаще и вернее. Это минерализация дерева DOM. Имеет это несколько вполне обоснованных преимуществ: упрощает сам процесс верстки, сводит количество потенциальных ошибок к минимуму, улучшает прозрачность кода. Об этом надо помнить всегда, и в моменте планирования структуры обращать на это особо много внимания.
Основные принципы таковы: для отступов используем только padding и margin (в зависимости от потребности) — делать отдельный 20 пиксельный div вовсе не обязательно, ограничиваем вложенность до минимума, не переусердствуем с position:relative и последующими смещениями блока (при неправильном использовании может привести к получасовой правке целого кода), активно пользуемся z-index для достижения нужного эффекта.
— Как выставлять div’ы друг за другом? А для этого используется свойство — float: left (или right, в зависимости от потребности), чтобы следующий div после таких поочередных стоял под ними, задаем ему свойство clear (например clear:left).
— Как выровнять div по центру? Одно из решений выглядит следующим способом — задаем margin-left и margin-right как auto (или еще проще — margin:0 auto;)
— Как позиционировать элементы находящиеся в div по вертикали? Зависит от элемента, например для текста хватит всего лишь указания vertical-align:middle, а для картинки нужно прописать line-height:Npx.
— Делать отступы при помощи margin или padding? В основном — margin служит для отступов между блоками, это отступ «наружу», так как padding — отступ «внутрь» и чаще всего применяется для организации отступа вокруг текста к примеру. Вроде бы простая вещь, а иногда файрбагом можно такие перлы встретить, что я не мог тут об этом не упомянуть.
— Смещать блок при помощи margin или position:relative в связке со смещениями по горизонтали и вертикали? Конечно же в данных случаях надо использовать margin. Правда как и везде — все зависит от конкретного случая, но в основном следует пользоваться все таки margin.
— Как растянуть div по содержимому блока? Для этого надо прописать height: auto;
— Как растянуть div по высоте родителя, который в свою очередь растягивается по высоте содержимого div’a находящегося внутри него, рядом с первым div’ом? Div’у с контентом задаем height: auto, двум остальным дивам height: 100% и display: table;
— Как сделать div невидимым? При помощи манипуляций свойством display. Для невидимости выставляем его на none.
— Как сделать прокрутку контента в div со статической высотой? Прописываем в свойствах overflow:scroll.
— Как отобразить (к примеру) тэг «a» как div (блок)? В свойствах задать высоту и ширину и выставить display:block;
Вот и все, что нужно знать чтобы безболезненно верстать на div’ах. На самом деле. Ну если всплывут еще какие нибудь вопросы, тогда тут сразу же появятся и ответы! А вообще-то тут нечего боятся — пол часа тренировок и вы уже профи! Так что отставляйте эти устаревшие table — и переходите на новую ступень эволюции!
Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.
тема избитая, но все же, есть такой код
до добавления doctype, растягивание работало отлично, но поняв что без него я не обойдусь пришлось его добавить и тут начались проблемы с растягиванием, сначала не мог растянуть блоки по высоте окна, помог пост из хабра и стили стали такими думаю принцип понятен.
но теперь появилась новая проблема и блоки перестали растягиваться в зависимости от содержимого,
у меня уже мозг плывет, не могу понять как это сделать, помогите пожалуйста.
Источник: