Как работает clearfix hack?

Question

[Nikita Shchypylov]

Объясните доступно, как работает этот код и зачем его использовать?

.cf:before, .cf:after {
 content: " ";
 display: table
}
.cf:after {
 clear: both
}
.f_left {
 float: left
}
.f_right {
 float: right
}

Answer 1

[lavezzi1]

Есть коробочка(в верстке контейнер) в нем два клубочка (со свойством float: left), без примененного clearfix к контейнеру (коробочке) клубки выпадут и коробка станет пустой. Поэтому всегда нужно применять clearfix к контейнеру внутри которого флоатятся элементы. Надеюсь стало понятно.

Для эксперимента создай контейнер, положи туда два элементы и примени к ним float: left задай им цвет красный, а контейнеру синий. Без clearfix ты не увидишь контейнера, а с хаком увидишь.

Comments

[Nikita Shchypylov]

Были бы такие учителя на уроках высшей математики
Спасибо_)