Поиск

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

<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, обновлено 18.10.2019 851

Темы

#CSS

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

Основные примеры работы с массивами PHP. Создание, наполнение, извлечение удаление значений.
29.10.2017 4197
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
12.12.2018 5941
Пример горизонтального меню для лэндингов, в котором реализовано...
19.12.2018 1355
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все...
16.10.2018 3288
Примеры защиты от копирования текста с сайта, добавление копирайта при копировании и отключение выделения текста в...
19.12.2016 2689
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
04.03.2018 10390