Как работает Контекст форматирования блока CSS ?
CSS2. 1 говорится, что в контексте форматирования блока блоки располагаются вертикально, начиная сверху. Это происходит, даже если на пути есть плавающие элементы, за исключением случаев, когда блок блока устанавливает новый контекст форматирования блока. Как мы знаем, когда браузеры отображают блоки блоков в контексте форматирования блоков, плавающий элемент опускается, почему работает создание нового контекста форматирования блока?
Как блоки (блоки блоков и встроенные блоки) размещаются в обычном потоке ?
Я где-то читал, что блочные элементы генерируют блочные боксы, но плавающие элементы игнорируются, когда пользовательский агент рисует прямоугольник, и принимают их во внимание при заполнении содержимого. Хотя плавающие элементы будут перекрывать границы блоков других элементов, решение заключается в создании нового контекста форматирования блока для перекрывающихся элементов с использованием overflow: hidden .
«Новый контекст форматирования блока по-прежнему является форматированием блока», поэтому при рисовании блока он также будет обрабатывать плавающие элемент, как будто он не выходит. Это правильно или я неправильно понял «новый контекст форматирования блока»?
Говоря: «Именно такое поведение полезно для макетов столбчатого стиля. Однако основное его использование - остановить плавающие элементы, скажем, в div« основного содержимого », фактически очищая плавающие боковые столбцы, т. Е. поплавки, которые появляются раньше в исходном коде. "
Я не понимаю смысла, приведу пример, может быть, вы меня поймете.
.content {background: #eee; цвет # 000; граница: 3px solid # 444; ширина: 500 пикселей; высота: 200 пикселей; } .float {фон: rgba (0, 0, 255, 0,5); граница: 1px solid # 00f; ширина: 150 пикселей; высота: 150 пикселей; float: right; } p {фон: # 444; цвет: #fff; } Это поле содержимого
Оно содержит левое плавающее поле, вы можете видеть, что фактический блок содержимого находится под плавающим элементом, но что он это & lt; h3 & gt; и & lt; p & gt; строчные поля , которые укорачиваются, чтобы освободить место для поплавка. Это нормальное поведение.
плавающий блок Я думал, что плавающий блок должен плавать наверху продолжающего блока - div с классом содержание . Кроме того, если плавающий прямоугольник появляется в разметке раньше, он будет отображать то, что, по моему мнению, должно быть
. content {background: #eee; цвет # 000; граница: 3px solid # 444; ширина: 500 пикселей; высота: 200 пикселей; } .float {фон: rgba (0, 0, 255, 0,5); граница: 1px solid # 00f; ширина: 150 пикселей; высота: 150 пикселей; float: right; } p {фон: # 444; цвет: #fff; } плавающий блок Это блок содержимого
он содержит левый плавающий блок, вы можете увидеть, что фактическое содержимое div действительно находится под плавающей точкой, но это тег & lt; h3 & gt; и & lt; p & gt; строковые блоки , которые укорачиваются, чтобы освободить место для поплавка, это нормальное поведение
Как мы можем это объяснить? Можем ли мы использовать «контекст форматирования блока и контекст встроенного форматирования», чтобы объяснить это?