QR CODE для записи

Универсальных хак с clear:both при float

Float’ми уже давно мало кто пользуется, но иногда приходится. И всегда приходится их сбрасывать через clear:both

Известные хаки через лишний элемент типа <br class=’clear:both’/> или псевдоэлемент знают многие. Но есть очень простой способ создать универсальный стиль без дополнительных элементов. Для примера возьмём двухколонную вёрстку контента:

.column2float {
	width: 50%;
	float: left;
}
.column2float:nth-child(2n) + * {
	clear: both;
}

Всё гениальное просто. Сброс будет происходить после каждого второго .column2float.

Соответственно точно также для трёх колонок:

.column2float {
	width: 33.3%;
	float: left;
}
.column2float:nth-child(3n) + * {
	clear: both;
}

Четырёх

.column2float {
	width: 25%;
	float: left;
}
.column2float:nth-child(4n) + * {
	clear: both;
}

И так далее.