Clearfix: принудительно создайте элемент для самоочистки своих детей онлайн урок.


В эти дни вам будет хорошо (IE 8 и выше):

.group:after {
content: "";
display: table;
clear: both;
}

Примените его к любому родительскому элементу, в котором вам нужно очистить поплавки. Например:

<div class="group">
<div class="is-floated"></div>
<div class="is-floated"></div>
<div class="is-floated"></div>
</div>

Вы использовали бы это вместо очистки float с чем-то вроде& lt; br style = "clear: both;" & GT;внизу родителя (легко забыть, не обрабатывать прямо в CSS, не семантично) или использовать что-то вродеoverflow: hidden;на родительском (вы не всегда хотите скрыть переполнение).


Теперь немного истории!

Это была оригинальная популярная версия, предназначенная для поддержки браузеров, насколько это возможно:

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Там была немного более чистая версия , зарегистрированная здесь Джеффом Старром, основанная на том факте, что никто не использует IE для Mac, и это то, о чем шла обратная косая черта.

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Затем стало популярным использование «группы» в качестве названия класса, которое является более приятным и более смысловым (через Dan Cederholm). Кроме того, свойствоcontentдаже не требует пространства, оно может быть пустой строкой (через Николаса Галлахера). Затем, без текста,font-sizeне требуется (Chris Coyier).

.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

Конечно, если вы отбрасываете поддержку IE 6 или 7, удалите связанные строки.

Обновление 18 мая 2011 года: Николас Галлахер снова с «микро» clearfix . Также см. Этот дополнительный материал .
.group:before,
.group:after
{
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

См. Верхнюю часть этой страницы для самой современной версии clearfix.

В будущем мы могли бы сделать :

.group {
display: flow-root;
}