Clearfix: Принудете елемент да се самоизчисти от своите деца - CSS-трикове

Това ще ви оправи в наши дни (IE 8 и по-нови):

.group:after ( content: ""; display: table; clear: both; )

Приложете го към всеки родителски елемент, в който трябва да изчистите плувките. Например:

Бихте използвали това, вместо да изчистите плувката с нещо като
в долната част на родителя (лесно да се забрави, не се обработва в 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 */

След това стана популярно да се използва „група“ като име на клас, което е по-хубаво и по-семантично (чрез Дан Чедерхолм). Също така, contentсвойството дори не се нуждае от пространство, може да е празен низ (чрез Николас Галахър). Тогава, без никакъв текст, font-sizeе ненужно (Крис Койер).

.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 г .: Николас Галахър отново с „микро“ ясна корекция. Вижте и тези допълнителни неща.

.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; )