Clearfix

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

clearfix

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

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

CSS

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

HTML

<div class="clearfix">
	<div style="width: 100px; float: left;">float</div>
	<div style="width: 100px; float: left;">float</div>
</div>
HTML
07.12.2016, обновлено 31.08.2019 684

Поделится

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

Сделать галерею которая заполнит все пространство фотографиями разного размера можно с помощью jQuery плагина...
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для...
Первыми тегами для зачёркнутого текста были strike и s. C приходом HTML 4 их использование стало осуждается, а в HTML 5...
Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.