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

Блок Форматирования Контекстах

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

С моим смелым, это элемент создать бит, который важен

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

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

что означает приведенная выше строка:

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

---

Поплавка Зазор

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

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

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

---

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

теперь, что средний столбец, вы можете просто выделить его с обеих сторон, так что это кажется, что он аккуратно сидит между двумя боковыми плавающими столбцами и принимает оставшуюся ширину, общий способ получить желаемую ширину, если центральный столбец является "жидким" - что будет хорошо, пока вам не понадобится использовать поплавки / зазор внутри вашего содержимого 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>

она производит следующее:

в целом это нормально, особенно если у вас нет фоновых цветов или внутренних (в основном содержании) поплавков - обратите внимание, что поплавки в порядке (еще не очищены) они делают, вероятно, то, что вы, кроме них,но они,H3 верхний край и pнижний край на самом деле не содержится в содержимом div (lightgrey background).

так к тому же простой маргинальный сценарий над кодом добавить:

.clear-r {clear: right;}

в CSS, и изменить второй HTML плавал поле:

<div class="floated clear-r"> this a floated cleared box</div>

#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;
}
.clear-r {
  clear: right;
}

<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 clear-r">this a floated cleared box</div>
</div>

на этот раз вы получите это:

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

---

сделать это установить контекст форматирования блока, ради детей!

и, наконец, сделать основной столбец контента взять на себя ответственность - стать контекстом форматирования блока - для его содержания: удалить margin: 0 200px; из основного содержания CSS и добавитьoverflow: hidden; и вы получите это:

#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;
  overflow: hidden;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

<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 clear-r">this a floated cleared box</div>
</div>

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

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

надеюсь, что это немного поможет, любые вопросы не стесняйтесь спрашивай!

---

Update: re дополнительная информация в вопросе:

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

да поплавки обычно накладывают свои контейнерные коробки, это то, что вы имеете в виду о родительских границах? Когда элемент блока рисуется и содержит поплавок, сам родитель блока рисуется как прямоугольник под поплавком, и это " встроенные анонимные поля" или просто "линейные поля" других дочерних элементов, которые сокращаются, чтобы освободить место для float

возьмите этот код:

#content {
  background: #eee;
  color #000;
  border: 3px solid #444;
}
.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px;
}
p {
  background: #444;
  color: #fff;
}

<div id="content">
  <div class="float">floated box</div>
  <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>

который производит это:

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

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

снова ссылаясь на приведенное выше изображение, если вы должны были окаймить левую сторонуp элемент, да он остановит перенос текста под нижней частью поплавка, потому что" линейные поля " (белый текст) будут касаться только левого края своего контейнера, и вы принесете цветной фон p вправо, подальше от поплавка, но вы не изменили поведение pформатирование контекста. Как и центральная колонка в первом изображение выше;)