Блочная верстка плавающих блоков DIV Clear FIX
Раздел(ы): HTML & CSS
Просмотры: 6797
Комментарии: 0
Clearfix хак популярный способ правильного отображения плавающих блоков, позволяющий не прибегать к помощи таблиц при верстке. Необходимость в нем возникает когда вы начинаете замечать, что высота родительского блока DIV не соответствует содержимому наследников. К примеру вы задумали такую организацию блоков у себя на сайте (для наглядности родительский блок выделен желтым цветом, а дочерние — зеленым и красным):
Для чего написали такую HTML страницу:
<!DOCTYPE HTML> <html> <head> <title>Clear-FIX</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="div-main"> <div class="div-left">DIV Left</div> <div class="div-right">DIV Right</div> <div> </body> </html>
и к ней соответствующий CSS файл стилей:
.div-main {
margin: 0 auto;
padding: 20px;
background: #eeee33;
width: 320px;
}
.div-left {
padding: 20px;
background: #339933;
float: left;
width: 100px;
}
.div-right {
padding: 20px;
background: #cc0033;
float: right;
width: 100px;
}
Однако в реальности вы получите такую картинку:
Родительский DIV не обнимает дочерние. То есть не растягивается по высоте входящих в него блоков. И никакой ошибки тут нет, просто в верстке используют плавающие блоки (свойство FLOAT). Плавающие элементы вырываются из текущего потока и создают в родительском контексте между собой собственный. При этом для внешнего потока они не будут иметь размеров. И чтобы родительский DIV учитывал их размер и растягивался по их содержимому необходима небольшая хитрость.
Два способа как растянуть размер родительского DIV по содержимому входящих в него блоков
Раньше я использовал такой дополнительный блок перед закрывающим тегом родительского DIV:
<div style="clear:both;"></div>
После чего внешний вид страницы соответствовал задуманному:
Второй способ как заставить родительский div растягиваться по высоте дочернего
Можно сделать «самоочищающийся» контейнер через псевдокласс after:
.clear-fix:before, .clear-fix:after {
content: " ";
display: table;
}
.clear-fix:after {
clear: both;
}
/* Костыли для ослика (Internet Explorer 6 и 7) */
.clear-fix {
*zoom: 1;
}
А родительскому блоку добавить соответствующий класс:
<div class="div-main clear-fix">
Внешний вид страницы так же будет соответствовать задуманной верстке:
Оба способа хорошо работают. И позволяют решить проблему плавающих блоков, чтобы родительский DIV растягивался по высоте содержимого дочерних.
Благодарности
При написании статьи были использованы следующие источники:
