Есть ли способ использовать взлом clearfix вместе с flexbox?

Question

Я использовал flexbox для макетов, с плавающими CSS-кодами как запасной вариант для старых браузеров. В целом это работает хорошо, так как браузеры, которые понимают display: flex будет игнорировать float на любых изгибаемых элементах.

Тем не менее, единственное место, где я столкнулся с проблемой этого подхода - это clearfix. Clearfix - это широко используемый хак, который использует невидимый :after псевдоэлемент, чтобы сделать контейнер правильно очищенным / содержать все плавающие элементы внутри него. Однако проблема заключается в том, что этот псевдоэлемент обрабатывается как гибкий элемент браузерами, которые поддерживают flexbox, что может привести к неожиданным проблемам с макетом. Например, если у вас есть два flex-элемента и вы используете justify-content: space-betweenвместо того, чтобы располагаться в начале и конце гибкого контейнера, они появятся в начале и в середине с невидимым clearfix ::after псевдоэлемент, занимающий конечную позицию.

Мой вопрос: есть ли способ использовать clearfix вместе с макетом flexbox, не вызывая этих проблем?

Answer 1

Один из способов справиться с этим - рассмотреть альтернативные методы clearfix.

::after Псевдоэлемент является одним из методов, но, как вы заметили, он становится гибким элементом в гибком контейнере. ( См. Вставку № 81 в этом ответе для получения более подробной информации).

Но есть и другие способы очистки поплавков. Например, вы можете использовать overflow: auto или же overflow: hidden,

Проверьте некоторые альтернативы здесь:

• Что такое исправление?
• Какие методы "clearfix" я могу использовать?
• Очистка поплавков: обзор различных методов очистки

---

Еще один способ решить вашу проблему - использовать modernizr.com для обнаружения функций.

С веб-сайта:

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

Modernizr позволяет легко создавать многоуровневые приложения: использовать новейшие и лучшие функции в браузерах, которые их поддерживают, не оставляя менее удачливых пользователей на высоком уровне.

Answer 2

Попробуйте это, это будет иметь дело с псевдоэлементами в гибком контейнере:

.clearfix::before,
.clearfix::after {
  flex-basis: 0;
  order: 1;
}

Answer 3

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

display: flex;
flex-wrap:wrap;
align-items: center;

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

<div class="clearflex"></div>

.clearflex{
    width:100%;
}

Добавляя пустой div со 100% шириной между гибким содержимым, кажется, что содержимое переносится на новую строку точно так же, как это сделал clearfix. Вы также можете добавить высоту в clearflex, если вам нужен отступ между строками.

Answer 4

Одним из способов достижения этого является использование overflow: hidden или же overflow: auto на .clearfix и полностью удалить .clearfix::after,

.clearfix {
    overflow: auto;  /* or overflow: hidden; */
}

Однако, если вы не можете использовать overflow собственность на .clearfix по какой-то причине вы можете использовать margin-left: auto на втором div (учитывая, что ваш макет имеет только два столбца). Таким образом, невидимый ::after будет размещен между двумя макетами div.

.clearfix { ... }
.clearfix::after { .... }
.clearfix > div:last-of-type {
    margin-left: auto;
    /* for justify-content: space-between only.
    * For other option, adjust accordingly */
}

Answer 5

Вы можете установить flex-wrap для вашего flex-контейнера и ширину: 100% после псевдоэлемента, чтобы он был обернут и не мешал выравниванию.