Зачем clearfix нужно добавлять еще и c помощью псевдоэлемента :before?
Не обязателен :before для очистки floats, но это позволяет избежать проблем с схлопывающимися верхними отступами в современных браузерах.Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. (с) Nicolas Gallagher
Если захотите почитать про это ещё: clearfix Reloaded + overflow:hidden DemystifiedHow to "patch" clearfix so it can better handle co...
Хороший вопрос, вот clearfix от rhr.me/:/* Clearfix  */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
Здесь можно посмотреть полный пример
https://github.com/operatino/markup-process/blob/g...