Важные BFC в CSS

внешний интерфейс контейнер CSS

В CSS есть важное понятие BFC, и понимание BFC позволяет нам понять некоторые оригинальные странные (??) места в CSS.

Заинтересованные студенты могут добавить группу WeChat в конце статьи для совместного обсуждения~

1. Введение

Прежде чем объяснять BFC, давайте поговорим о документообороте. Поток документов, о котором мы часто говорим, на самом деле делится напоток позиционирования,плавающий поток,нормальный потоктри. Обычный поток фактически относится к FC в BFC. FC (Formatting Context) буквально переводится как контекст форматирования. Это область рендеринга на странице. Он имеет набор правил рендеринга, которые определяют расположение его дочерних элементов, а также взаимосвязь и роль с другими элементами. . Распространенными FC являются BFC, IFC, а также GFC и FFC.

BFC(Контекст блочного форматирования) Контекст форматирования блочного уровня — это область рендеринга, используемая для компоновки блоков блочного уровня.Объяснение на MDN: BFC — это часть визуального рендеринга CSS веб-страницы, которая используется для определения расположения блочных блоков и области плавающего диапазона взаимодействия.

Примечание. Область действия BFC включает все дочерние элементы, которые создают элемент контекста, ноне включает в себяВнутренний элемент, создающий дочерний элемент нового BFC. Это показывает, с другой стороны, что элемент не может существовать в двух BFC одновременно. Потому что, если элемент может находиться в двух БФС одновременно, это означает, что этот элемент может взаимодействовать с элементами в двух БФС, что нарушает эффект изоляции БФС.

2. Три схемы позиционирования документооборота

Регулярный поток (нормальный поток)

  • В обычном потоке ящики располагаются один за другим;
  • В контексте блочного форматирования они располагаются вертикально;
  • В контексте встроенного форматирования они располагаются боком;
  • Когда position является статическим или относительным, а float не задано, будет запущен обычный поток;
  • Для статического позиционирования position: static, позиция поля — это позиция в обычном макете потока;
  • Для относительного позиционирования position: relative позиция смещения блока определяется свойствами top, bottom, left, right. Даже если есть смещение, исходная позиция все равно сохраняется, и другие обычные потоки не могут занимать эту позицию.

Плавает

  • Элемент с левым плаванием должен быть как можно дальше влево и вверх, и то же самое верно для элемента с плавающим справа.
  • Это приводит к тому, что обычный поток обтекает его, если не установлено свойство clear.
  • Плавающие элементы не влияют на макет блочных элементов.
  • Однако плавающие элементы будут влиять на макет встроенных элементов, позволяя им окружать себя и расширять родительский элемент, тем самым косвенно влияя на макет блочных элементов.
  • Высшая точка не будет превышать наивысшую точку текущей строки, наивысшую точку плавающего элемента перед ней.
  • не выходит за пределы содержащего его блока, если только сам элемент уже не шире содержащего его блока
  • Строчные элементы отображаются справа от элементов, перемещаемых слева, и слева от элементов, перемещаемых справа. Плавающие элементы не размещаются слева от элементов, перемещаемых слева, и справа от элементов, перемещаемых справа.

Абсолютное позиционирование

  • Схема абсолютного позиционирования, бокс убран из обычного потока и не влияет на верстку обычного потока;
  • Его позиционирование относительно содержащего его блока, соответствующих свойств CSS: сверху, снизу, слева, справа;
  • Если позиция атрибута элемента является абсолютной или фиксированной, это абсолютно позиционированный элемент;
  • Для position: absolute позиционирование элемента будет относительно ближайшего относительного, фиксированного, абсолютного в родительском элементе или относительно тела, если его нет;

3. Режим запуска BFC

  1. Корневой элемент, тег HTML
  2. элемент float: значение floatleft,right
  3. Значение переполнения не видно, оноauto,scroll,hidden
  4. отображаемое значениеinline-block,table-cell,table-caption,table,inline-table,flex,inline-flex,grid,inline-grid
  5. Элемент позиционирования: значение позицииabsolute,fixed

УведомлениеПричина, по которой display:table также может генерировать BFC, заключается в том, что Table по умолчанию генерирует анонимную ячейку таблицы, а эта анонимная ячейка таблицы генерирует BFC.

4. Ограничения

Ограничения браузера в области BFC:

  1. Дочерние элементы, генерирующие элемент BFC, размещаются один за другим.
  2. Их отправной точкой по вертикали является вершина содержащего блока, а расстояние по вертикали между двумя соседними дочерними элементами зависит от свойства поля элемента. смежных блочных элементов в BFCСхлопывание полей (Освоение схлопывания полей).
  3. В дочерних элементах, генерирующих элемент BFC, левое поле каждого дочернего элемента касается левой границы содержащего блока (для форматирования справа налево правое поле касается правой границы), даже для плавающих элементов (хотя дочерний элемент ' область содержимого будет сжата из-за обтекания), если только дочерний элемент также не создает новый BFC (например, сам является плавающим элементом).

Толкование правил:

  1. Внутренние ящики будут размещены один за другим в вертикальном направлении.
  2. Вертикальное расстояние внутренней коробки определяется полем. (Полное утверждение таково: поля двух соседних блоков, принадлежащих одному и тому же BFC, схлопнутся, но разные BFC не схлопнутся.)
  3. Левое поле каждого элемента касается левой границы содержащего блока (слева направо), даже для плавающих элементов. (Это означает, что нейтронный элемент БТЭ не выйдет за пределы содержащего его блока, а элемент, положение которого является абсолютным, может выйти за границу содержащего его блока)
  4. Площадь BFC не будет перекрывать площадь элемента поплавка
  5. При расчете высоты BFC в расчете также участвуют плавающие дочерние элементы

5. Функция

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

5.1 Предотвращение закрытия элементов плавающими элементами

Блочный элемент в обычном потоке документов может быть покрыт плавающим элементом, вытесняя обычный поток документов.Поэтому вы можете установить значения плавающего, отображаемого и позиционного элемента для запуска BFC, чтобы предотвратить его покрытие плавающий ящик.

Предотвращение покрытия элементов плавающими элементами с помощью BFC

5.2 Может содержать плавающие элементы

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

Включить плавающие элементы с помощью BFC

Обратите внимание, что активация BFC здесь не препятствует тому, чтобы другие формы элементов потока вне документа переопределяли обычные элементы потока.

Другие формы в BFC находятся вне документооборота (абсолютно зафиксировано)

5.3 Предотвращение переноса макета с несколькими столбцами из-за округления браузера

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

Предотвратить перенос последнего столбца в многоколоночный макет с помощью BFC

5.4 Предотвращение слияния полей соседних элементов

Верхние и нижние поля двух смежных подэлементов блочного уровня, принадлежащих одному и тому же BFC, будут перекрываться (если установлен режим записи: tb-rl, горизонтальные поля будут перекрываться). Следовательно, можно предотвратить перекрытие полей, когда два соседних подэлемента уровня блока принадлежат разным BFC. Здесь div оборачивает любой смежный блок уровня блока, а два исходных блока принадлежат двум разным BFC, путем изменения свойств этого div для предотвращения перекрытия полей.

Используйте BFC для предотвращения слияния полей

Но вотсомневаться: Если вы обернете вокруг него div, установка любого свойства, запускающего BFC, предотвратит слияние полей соседних элементов. Поскольку они принадлежат разным BFC, слияние полей не произойдет. И если вы не обертываете div снаружи, когда вы устанавливаете display на inline-block, inline-flex, table-captain и position на absolute, fixed, float влево, вправо, это может предотвратить слияние полей. Вот проблема:

Мы знаем, что установка position и float выведет элемент из потока документа и создаст новый BFC, так что эти два элемента не будут соседними элементами, что может предотвратить слияние полей смежных элементов, но inline-block, inline-flex, inline- Почему сетка и капитан таблицы могут работать? Если кто-нибудь знает, почему, пожалуйста, дайте мне знать ~

Большинство сообщений в Интернете имеют разную глубину и даже некоторые несоответствия. Следующие статьи являются кратким изложением процесса обучения. Если вы найдете какие-либо ошибки, пожалуйста, оставьте сообщение, чтобы указать ~

Ссылаться на:

  1. Мое понимание БФС
  2. Глубокое понимание BFC и Margin Collapse
  3. Глубокое понимание BFC
  4. Understanding Block Formatting Contexts in CSS
  5. Изучите БФУ
  6. Understanding Block Formatting Contexts in CSS
  7. Позвольте вам полностью освоить плавающие элементы CSS

PS: Всех приглашаю обратить внимание на мой публичный аккаунт [Front End Afternoon Tea], давайте работать вместе~

Кроме того, вы можете присоединиться к группе WeChat «Front-end Afternoon Tea Exchange Group», нажмите и удерживайте, чтобы определить QR-код ниже, чтобы добавить меня в друзья, обратите вниманиеДобавить группу, я заберу тебя в группу~

Категории