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

Вам известна старая проблема: контейнеры, содержащие плавающие элементы, автоматически не увеличивают свою высоту, закрывая дочерние элементы.

Одним из подходов к решению этой проблемы является "clearfix", который добавляет ряд правил CSS для обеспечения правильного растяжения контейнера.

Тем не менее, просто давая контейнер overflow: hidden кажется, работает так же хорошо, и с той же степенью совместимости браузера.

Согласно этому руководству, оба метода совместимы во всех браузерах, которые важны сегодня.

Означает ли это, что "clearfix" устарела? Есть ли какое-то преимущество в использовании overflow: hidden?

Здесь очень похожий вопрос: в чем разница между взломом clearfix и переполнением: скрытый и переполнением: автоматический? но на этот вопрос на самом деле нет ответа.

Источник

8 ответов

Решение

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

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

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

Вопрос там был:

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

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

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

http://jsbin.com/ubapog

Источник

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

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

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

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

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

пример

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

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

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

Источник

Да, это "не рекомендуется" CSS Display L3:

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

Так что теперь правильный путь

display: flow-root;

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

Источник

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

Источник

Примечание. Убедитесь, что у вас установлен правильный 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's taller than the other columns because it's 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>
Источник

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

Источник

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

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

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
Источник
Другие вопросы по тегам