Является ли clearfix устаревшим?

Ответ 1

Вы можете в значительной степени использовать overflow: hidden все время.

Но есть исключения. Вот пример одного из них:

Переполнение контейнера div горизонтально, но не вертикально

Вопрос был:

• Там фиксированная высота: http://jsfiddle.net/je8aS/2/
• Без фиксированной высоты: http://jsfiddle.net/thirtydot/je8aS/5/
• Как очистить поплавки без использования фиксированной высоты?
• overflow: hidden не работает: http://jsfiddle.net/thirtydot/je8aS/6/
• Вам нужно использовать какой-либо другой способ очистки поплавков, например clear: both:
  http://jsfiddle.net/je8aS/3/
• класс clearfix также работает: http://jsfiddle.net/thirtydot/je8aS/11/

Вот более важный пример того, когда вы не можете использовать overflow: hidden:

http://fordinteractive.com/misc/overflow/

Чтобы не сказать, что clearfix является единственной альтернативой - display: inline-block чисто исправляет этот пример:

http://jsbin.com/ubapog

Ответ 2

Как упоминалось в другом ответе, недостатком hidden является то, что он, на удивление, скрывает такие вещи, как выпадающие меню. Однако есть другой способ содержать одну строку, плавая родительский контейнер. Обычно это работает там, где overflow: hidden имеет недостаток, а также плавающий помогает с множеством устаревших проблем IE, особенно в списках. Если вы можете использовать ширину, я бы использовал "float in float" или display: inline-block.

Я не говорю, что "clearfix" не имеет смысла, но для меня это слишком широко укоренилось в CMS-темах (например, Wordpress и Drupal), которые, как мне кажется, во многих случаях слишком много используются и на divs, t действительно нужно очистить или содержать.

Я не могу думать о ситуации, когда я не могу использовать переполнение или float, через clearfix, но мой мозг в праздничном режиме - но, поскольку он, clearfix, является решением для копирования/вставки, которое иногда является самым простым рекомендовать, однако он должен быть тем, который устанавливает hasLayout для IE, что, конечно же, и переполнение, и float тоже теперь тоже.

добавлен это только что появилось снова: и мозг не в праздничном режиме.

Я действительно начинаю думать, да, clearfix не требуется (по крайней мере, я еще не нашел пример, где он есть) даже пример @thirtydot выше можно обойти с помощью display: inline-block и все еще поддерживают IE6, контейнер с фиксированной шириной имеет IE7 и ниже требование hasLayout, и, делая его встроенным блоком для всех других браузеров, он может быть центрирован, а элементы с надписью "offset" будут работать нормально контейнер растягивается вертикально

Пример

Я также видел ссылку на новое улучшенное clearfix для этих коллапсирующих полей с использованием :before, а также :after в халате clearfix, но если я не упустил что-то демо ошибочно - в элементах pre есть неравномерные пробелы, а в блоках с четким фиксом фактически нет каких-либо поплавков, как только вы будете перемещать элементы в них, каждый метод выполняет то же самое.

Поля примечаний на элементах pre не реагируют так же, как и на других (так что попробуйте с дополнением вместо поля, чтобы увидеть один и тот же рисунок во время тестирования).. и есть еще один IE "fible", в котором IE doesn 't содержать поля правильно, если они явно не указаны, и в демо есть явные поля на h2, но не p, поэтому все вещи равны элементу clearfixed, как показано 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;
}

Ответ 3

overflow:hidden очень "мощный" (я использовал его несколько лет, и я согласен с тем, что сказал Дэвид), но в то же время подвергает проблеме. Если внутри контейнера есть некоторые абс элементы, которые вы должны перетащить за пределы, вы не сможете увидеть их вне контейнера. В этом конкретном случае вам нужно использовать трюк 'clearfix';)

Ответ 4

Да, он "устарел" от CSS Display L3:

Создано flow и flow-root внутренние типы отображениячтобы лучше выразить раскладку потока типы дисплеев и создать явный переключатель для создания элемента BFC root. (Это должно устранить необходимость в хаках типа ::after { clear: both; } и overflow: hidden, которые предназначены для достижения этой цели.)

Итак, правильный способ -

display: flow-root;

К сожалению, это недавнее дополнение, поэтому браузеры еще не реализовали его.

Ответ 5

Я рекомендую метод overflow: hidden в течение многих лет. Он широко поддерживается.

Ответ 6

Недавно я с удивлением обнаружил, что overflow:hidden отлично работает в наши дни. Я использовал метод clearfix вплоть до 6 месяцев назад, и он довольно раздулся в сравнении.

Ответ 7

Примечание. Убедитесь, что у вас есть правильный набор DOCTYPE, если вы просто тестируете. Поймал меня несколько раз, и я всегда забываю!

В IE9, например, следующее просто не будет работать без <!DOCTYPE html> вверху.

<!DOCTYPE html>
<html>

<style>

#bottom_panel {
    overflow: hidden;
    background: orange;
    border:1px solid red;
}

#bottom_panel .col1 {
    background: red;
    float: left;
    width: 100px
}

#bottom_panel .col2 {
    background: yellow;
    float: left;
    width: 70px
}

#bottom_panel .col3 {
    background: green;
    float: left;
    width: 150px
}

.clear {
    clear: both;
}

</style>

<div id="bottom_panel">

    <div class="col1">this is col 1</div>
    <div class="col2">this is col 2. It taller than the other columns because it got more text in ot</div>
    <div class="col3">this is col 3</div>

</div>

<div>
This should not be floating around! Should be underneath the columns!
</div>

</html>

Ответ 8

Я бы не сказал, что clearfixing устарел. Однако я бы сказал, что большинство версий clearfix, которые в настоящее время используются, устарели.

По мнению экспертов, это версия, которую вы должны использовать сегодня:

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}