В зависимости от создаваемой конструкции каждое из нижеприведенных решений clearfix CSS имеет свои преимущества .

У clearfix действительно есть полезные приложения, но его также использовали в качестве взлома. Прежде чем использовать clearfix, возможно, вам могут пригодиться эти современные решения css:

• css flexbox
• css grid

Современные решения Clearfix

Контейнер с overflow: auto;

Самый простой способ очистить плавающие элементы используют стиль overflow: auto для содержащего элемента. Это решение работает во всех современных браузерах.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

Один недостаток - использование определенных комбинаций полей и отступов на внешнем элементе может вызвать появление полос прокрутки, но это можно решить, поместив поля и отступы на другой родительский элемент, содержащий.

Использование 'overflow: hidden' также является решением clearfix, но не будет иметь полос прокрутки, однако использование hidden приведет к обрезке любого содержимого, расположенного за пределами содержащего элемента.

Примечание: Элемент floated - это тег img в этом примере, но может быть любым элементом html.

Clearfix Reloaded

Тьерри Кобленц на CSSMojo написал: Самая последняя перезагрузка clearfix . Он отметил, что отказавшись от поддержки oldIE, решение можно упростить до одного оператора css. Кроме того, использование display: block (вместо display: table ) позволяет правильно сжимать поля, когда элементы с clearfix являются родственными.

.container::after {
  content: "";
  display: block;
  clear: both;
}

Это самая современная версия clearfix. - объясняет, как решить общие проблемы, связанные с этой техникой, а именно установку width: 100% в контейнере.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

Вместо использования свойства display для установки " hasLayout "для IE, другие свойства могут использоваться для запуска hasLayout для элемента .

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Другой способ очистить плавающие объекты с помощью свойства overflow - использовать хак подчеркивания . IE будет применять значения с префиксом подчеркивания, другие браузеры - нет. Свойство zoom запускает hasLayout в IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

Хотя это работает ... не идеально использовать хаки.

PIE: Простой метод очистки

Это более старый «Легкая очистка» имеет то преимущество, что позволяет позиционированным элементам висеть за пределами контейнера за счет более хитрого CSS.

Это решение довольно старое, но вы можете узнать все о Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html[12126 impressionElement using "clear" свойство

Быстрое и грязное решение (с некоторыми недостатками), когда вы быстро собираете что-то вместе:

<br style="clear: both" /> <!-- So dirty! -->