Блочная верстка плавающих блоков DIV Clear FIX

 9 февраля 2015      
 HTML & CSS      
 Комментариев еще нет

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 растягивался по высоте содержимого дочерних.

Список использованных источников

  1. http://nicolasgallagher.com/micro-clearfix-hack/
  2. http://www.programmersforum.ru/showthread.php?t=141902

 Метки:  ,

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Технический блог © 2016
SQL - 38 | 0,139 сек. | 6.97 МБ