Clearfix – отмена действия float

Если в родительском блоке есть элементы со свойством float: left то у него теряется высота и перестает работать margin.

У родителя с элементами float left теряется высота и не работает margin

Исправляет это добавление overflow: hidden к родительскому блоку, но если есть другие элементы, выходящие за границу блока или тень то они будут обрезаны.

Второй способ – добавить класс clearfix к родительскому блоку:

CSS:

/* clearfix */
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}
CSS

Clearfix в действии

Без Clearfix:

<p>Текст, который идет до элемента.</p>
<div>
	<div class="box">float left</div>
	<div class="box">float left</div>
</div>
<p>Текст, который идет после элемента.</p>
HTML

С Clearfix:

<p>Текст, который идет до элемента.</p>
<div class="clearfix">
	<div class="box">float left</div>
	<div class="box">float left</div>
</div>
<p>Текст, который идет после элемента.</p>
HTML
07.12.2016, обновлено 07.10.2022
6899

Комментарии

, чтобы добавить комментарий.

Другие публикации

Текст в две колонки
Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.
52031
+3
Выделение активных пунктов меню с помощью JQuery
Небольшой пример, как выделить активный пункт в меню с помощью JQuery. Возьмем меню для левой колонки...
4978
+4
Вывод PHP-массива колонками
Несколько примеров как вывести одномерный PHP-массив в виде таблицы, плиток и списком в несколько колонок. Имеем массив городов...
14884
+3
Работа с Input Text jQuery
Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
110723
+18
Шахматное поле на CSS
Приемы как сделать шахматную сетку на псевдо-свойстве :nth-child().
24611
+1
Блоки со стрелками (часть 1)
Добавить стрелки к блоку можно с помощью псевдо-элемента :before.
22111
+2