Как работает контекст форматирования блоков CSS?

Как работает CSS Format Formatting Context?

Спецификации CSS2.1 говорят о том, что в контексте форматирования блока поля располагаются вертикально, начиная с вершины. Это происходит даже в том случае, если на пути есть плавающие элементы, за исключением случаев, когда блок-блок установил новый формат форматирования блока. Как мы знаем, когда браузеры отображают блок-блоки в контексте форматирования блоков, плавающий элемент опускается, почему работает установление контекста форматирования нового блока?

Как ящики (блок-боксы и встроенные ящики) выложены в нормальном потоке?

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

"Новый формат форматирования блоков по-прежнему является форматированием блоков", поэтому при рисовании окна он также будет обрабатывать плавающий элемент так, как будто он не выходит. Это правильно или я неправильно понял "новый формат форматирования блоков?"

Обновление: больше вопросов

Говоря "Это поведение, которое полезно для макетов столбцов в стиле столбцов. Основное его использование заключается в том, чтобы остановить поплавки, скажем, в" основном содержимом "div, фактически очищая столбцы с плавающей стороной, то есть плавающие, которые появляются раньше в источнике код".

Я не понимаю смысла, я приведу пример, может быть, вы поймете меня.

.content {
  background: #eee;
  color #000;
  border: 3px solid #444;
  width: 500px;
  height: 200px;
}
.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: right;
}
p {
  background: #444;
  color: #fff;
}
<div class="content">
  <h3>This is a content box</h3>
  <p>It contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;h3&gt; and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float. This is normal behaviour.</p>
  <div class="float">floated box</div>
</div>

ОТВЕТЫ

Ответ 1

Контексты форматирования блоков

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

С моей смелостью это бит установить, что важно

Это означает, что элемент, который вы используете overflow (ничего, кроме видимого) или float или inline-block.. и т.д., становится ответственным за компоновку его дочерних элементов. Это дочерние элементы, которые затем "содержатся", независимо от того, плавают ли они или сворачиваются поля, они должны быть полностью связаны их ограничивающим родителем.

В контексте форматирования блоков каждый левый внешний край касается левого край содержащего блока (для форматирование справа налево, правые края потрогать)

Что означает следующая строка:

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

Float Clearance

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

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

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

Чтобы сделать основной контент новым контекстом форматирования блоков или нет?

Теперь, когда средний столбец, вы можете просто поместить его с обеих сторон, чтобы он, по-видимому, сидел аккуратно между двумя столбцами с плавающей точкой и занимал оставшуюся ширину, что является обычным способом получения желаемой ширины, если центральная колонка является "текучей", - это будет хорошо, пока вам не понадобится использовать float/resolution внутри вашего содержимого div (обычное явление для тех, кто использует "clearfix" хаки или шаблоны, включая их)

Возьмите этот очень простой код:

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated">this a floated box</div>
</div>