Какие методы "clearfix" я могу использовать?

Я рекомендую использовать следующий код, который взят с сайта http://html5boilerplate.com/. Этот метод называется "Magnificent CLEARFIX" и помогать правильно обрабатывать элементы с плавающими позициями.

/* >> Великолепный CLEARFIX << */
.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Скрывает в IE-mac */
.clearfix {  
  display: block;  
}

Этот подход усовершенствует поддержку оформления в случаях, когда используются плавающие элементы и предотвратит проблемы с обтеканием. Убедитесь, что вы применяете класс clearfix к родительским элементам, содержащим плавающие элементы, чтобы корректно отобразить их высоту.

Свойство overflow можно использовать для очистки флоатов без дополнительной разметки:

.container { overflow: hidden; }

Это решение работает во всех браузерах, кроме IE6, где вам просто нужно включить hasLayout (для этого я обычно предпочитаю использовать zoom):

.container { zoom: 1; }

Для получения дополнительной информации вы можете ознакомиться с этой статьей: QuirksMode.

Я нашел ошибку в официальном методе CLEARFIX: точка (DOT) не имеет заданного размера шрифта. Если вы установите height = 0, и первый элемент в вашем DOM-дереве будет иметь класс "clearfix", то внизу страницы всегда будет появляться отступ в 12 пикселей 😃

Чтобы исправить это, используйте следующий CSS:

/* float clearing for everyone else */
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Теперь это часть макета YAML. Обратите внимание на это - это очень интересно!
http://www.yaml.de/en/home.html

Это довольно аккуратное решение:

/* Для современных браузеров */
.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

/* Для IE 6/7 (активация hasLayout) */
.cf {
    zoom: 1;
}

Это решение известно тем, что работает в Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+.

Использование селектора :before не является обязательным для очистки флоатов, но предотвращает схлопывание верхних отступов в современных браузерах. Это обеспечивает визуальную последовательность с IE 6/7, когда применяется zoom: 1.

Дополнительная информация доступна по ссылке: nicolasgallagher.com

При использовании класса .clearfix из Bootstrap, он позволяет обойти проблему с обтеканием элементов. Вот пояснение к коду:

.clearfix {
  *zoom: 1; /* Для старых версий IE, чтобы заставить контейнер вести себя как блок */
}

.clearfix:before,
.clearfix:after {
  display: table; /* Создает контекст для внутреннего блока, который помогает избежать слияния с соседними элементами */
  line-height: 0; /* Убираем высоту строки для псевдоэлементов, чтобы они не занимали лишнего пространства */
  content: ""; /* Псевдоэлементы должны иметь контент, даже если он пустой */
}

.clearfix:after {
  clear: both; /* Очищает обтекание, чтобы контейнер корректно обрамлял свои внутренние элементы */
}

Этот стиль используется для исправления проблемы с обтеканием, когда внутри контейнера находятся плавающие элементы. Добавление класса clearfix к родительскому элементу гарантирует, что он будет правильно обрамлен, даже если в нем есть элементы с float.

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