Как понять функцию BFC в CSS

CSS

в cssBFCФункции — это правила рендеринга блоков, представленные в спецификации CSS 2.1. Использование этих правил может помочь нам справиться с макетом и другими проблемами на странице. Например: в прозрачной плавающей схеме мы можем добавить в родительский контейнерoverflow:hidden, который используетсяBFCхарактеристика. В то же время, это также часто задаваемый вопрос на собеседовании, так что у меня есть глубокое понимание этого.BFCОчень важный.

Что такое БФК

БФК это(Block Formatting context)Сокращение от контекста форматирования блока. Можно понять, что это область блочного рендеринга, в которой применяются некоторые правила рендеринга, и это магия в мире CSS. Почему это называется зачарованием, потому что оно срабатываетBFCЭлемент под контейнером фичи полностью изолирован от внешнего элемента контейнера, и расположение дочерних элементов не повлияет на внешний элемент, и наоборот.

BFCЭлементы имеют следующие характеристики:

  • Блоки BFC не перекрываются с плавающими блоками

  • Плавающие элементы учитываются при расчете высоты элемента BFC.

  • Блоки под BFCmarginПерехлестнет, не тот же не будет

  • Элемент BFC представляет собой автономный контейнер, который изолирует элементы внутри от внешних элементов с дополнительными влияниями.

Запустить BFC

Функцию BFC блочного элемента можно активировать следующими настройками:

  • floatЗначение неnone

  • overflowценностьauto, scrollа такжеhidden

  • displayценностьtable-cell, table-captionа такжеinline-block

  • positionУстановить какabsoluteа такжеfixed

Помимо,htmlСам элемент по умолчаниюBFCэлемент

Сценарии применения

очистить поплавок

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

.box {
    background: #eee;
}
.left {
    width: 200px;
    height: 200px;
    float: left;
    border: 1px solid pink;
}
.right {
    height: 100px;
    border: 1px solid greenyellow;
}

Эффект следующий:

видимый плавающий элемент.leftвне нормального течения, а элементы.rightПроизошло перекрытие. А высота родительского контейнера не содержит плавающих элементов, происходит коллапс.

использоватьBFCФункция 2 элемента, срабатывающая в контейнере, содержащем плавающий элементBFCОсобенности, предотвращающие падение контейнера по высоте. Обычно устанавливаетсяoverflow:hiddenзапускать следующим образом:

.box {
    background: #eee;
    /* 触发bfc */
    overflow: hidden;
}

Эффект следующий:

Адаптивная верстка

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

.right {
    height: 100px;
    border: 1px solid greenyellow;
    overflow: hidden;
}

Эффект следующий:

Но за пределами.rightЭто решение не применимо, когда область должна отображать контент. годный к употреблениюtable-cellа такжеinline-blockвызыватьBFCхарактеристика.

.right {
    display: table-cell;
    width: 9999px;
    height: 100px;
    border: 1px solid greenyellow;
    /* 利用 css hack 兼容IE7 的情况 */
    *display: inline-block;
    *width: auto;
}

Особенностью блока ячеек является то, что когда заданная ширина превышает родительский контейнер, фактическая ширина не будет превышать родительский контейнер, что соответствует адаптивному эффекту. Таким образом, мы устанавливаем слишком большое значение ширины. ноtable-cellОн используется только для браузеров IE8+.В случае, когда необходимо рассмотреть IE7, вы можете использовать настройкиinline-block, он ведет себя в IE7 иblockКак и коробка, он тоже адаптивный.

другие триггерыBFCУсловия характеристик имеют свои ограничения, поэтому две приведенные выше схемы обычно используются для срабатывания

предотвратить слияние полей

Мы знаем, что получится два соседних блок-бокса.marginСлияние, в зависимости от того, что больше. так что используйтеBFCФункция 3, пусть один из блок-боксов будет содержаться под новым контейнером BFC, держите их изолированными друг от друга и не влияйте.

Справочная статья

Углубленное понимание CSS адаптивного макета с несколькими столбцами в соответствии с характеристиками жидкости и характеристиками BFC.

Изучите BFC (контекст блочного форматирования)

Самый полный и тщательный анализ принципов BFC в истории

Категории