Как уже упоминалось в другом ответе, недостатком hidden является то, что он удивительным образом скрывает такие вещи, как выпадающие меню.Однако есть другой способ содержать одну строку, перемещая родительский контейнер.Обычно это работает там, где у overflow: hidden есть недостатки, а также всплывающие подсказки помогают с множеством устаревших проблем с IE, особенно в списках.Если вы можете использовать ширину, то я бы использовал «float in the float», или display: inline-block.
Я не говорю, что «clearfix» бесполезен - но для меня он слишком широко внедрен вТемы CMS (такие как Wordpress и Drupal), которые, как мне кажется, во многих случаях используются слишком часто, и в div, которые на самом деле не нужно очищать или содержать.
Я не могу придумать ситуациюгде я не могу использовать ни переполнение, ни плавающее, по сравнению с clearfix, но мой мозг находится в режиме праздника - но так как clearfix, это решение для копирования / вставки, которое иногда проще всего рекомендовать, однако оно должно быть тем, которое устанавливаетhasLayout для IE, который, разумеется, и переполнение, и float тоже теперь делают.
добавлено это только что появилось снова: мозг не в режиме праздника ..
Я действительно начинаю думать, да, clearfix не нужен (по крайней мере, я еще не нашел пример, где он есть), даже пример @ тридцатки выше можно обойти с помощью display: inline-block и до сих пор IE6 sКроме того, контейнер с фиксированной шириной имеет требование IE7 и ниже hasLayout, и, сделав его встроенным блоком для всех других браузеров, он может быть отцентрирован, и «смещенные» прикрепляющие элементы будут нормально работать, пока контейнер растягивается вертикально
Я также видел ссылку на новый улучшенный clearfix для тех коллапсирующих полей, использующих :before, а также :after в хакере clearfix, ноесли только я что-то упустил, демоверсия имеет дефект - в элементах pre есть неравномерный пробел, и поля "clearfixed" фактически не содержат поплавков, как только вы выпустите элементы вих каждый метод выполняет одинаково.
Обратите внимание, поля на pre элементах не реагируют так же, как другие (так что попробуйте его с отступом вместо поля, чтобы увидеть ту же картинку во время тестирования) ... и есть еще один IE "foible"при этом IE не содержит полей должным образом, если они не указаны явно, а в демоверсии есть явные поля для h2, но не p, поэтому все вещи равны элементу с фиксированными значениями, как у TJK в этом примерестраница искусственно заставляет сдерживать поля в обычном элементе блока, почти так же, как это делает верхний / нижний отступ 1px, потому что браузеры все равно делают это по-другому!
Если вы это сделаете, то поместите элементы внутри этих контейнеров(в любом случае, точка очистки) - поля тогда содержат, как вы, вероятно, хотели бы, чтобы они находились внутри нового контекста форматирования блока - без какой-либо дополнительной :before части для взлома, все варианты clearfix работают одинаково хорошо!
См. Демоверсию перезагрузки
Итако мой разум больше не нуждается в этом способе «clearfix», просто найдите лучший способ создать этот новый контекст блочного форматирования, используя haslayout для более старых IE .. свойства для обоих одинаковы!
какВ своей статье TJK указывает: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
Лучшие альтернативы
Если вы можете применить ширину к элементу, содержащему числа с плавающей запятой, то ваш лучший вариантдолжен использовать:
display: inline-block; width: <any
explicit value>;
Я думаю, что это справедливо, и даже со 100% элементами, которые могут нуждаться в заполнении, вы можете сделать это в сочетании с box-sizing
.clearfix {
display: inline-block;
width: 100%;
*width: auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}