Введение
я не ожидалЧетыре года назад фронтенд преклонил колени на интервью CSS/(ㄒoㄒ)/~~Эта статья будет перепечатана многими публичными аккаунтами, и некоторые друзья оставляют сообщения, чтобы задать вопросы Я подытожу ее и дам более подробное объяснение здесь. Кроме того, пожалуйста, указывайте источник статьи, если вы ее перепечатываете, остальные не против, и знания подлежат распространению. Если вы считаете, что это хорошо, поставьте лайк и пусть больше людей увидят это.
2. Вопрос о том, что поля двух соседних элементов блочного уровня одного и того же BFC будут перекрываться
<body>
<div style="width:100px;height:100px;background:red;margin:20px;"></div>
<div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</body>
Согласно одному из правил рендеринга BFC: вертикальное расстояние блочных элементов определяется отступом. Поля двух соседних элементов блочного уровня, принадлежащих одному и тому же BFC, будут перекрываться.
Некоторые мелкие партнеры понимают это так: перекрытие будет происходить в одном и том же контейнере BFC, а затем до тех пор, покане в контейнере BFCПерекрытия не будет.
<body>
<div>
<div style="width:100px;height:100px;background:red;margin:20px;"></div>
<div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</div>
</body>
Хлеб один снаружиdivэлемент,divэлемент не является контейнером BFC, дваdivЭлемент не находится в контейнере BFC. В результате результаты, отображаемые в браузере, по-прежнему перекрываются с полями.
Сначала я процитирую перевод W3C
Поле (поле) в обычном потоке принадлежит контексту форматирования (контексту форматирования), а тип может быть BFC (контекст блочного форматирования) или IFC (контекст встроенного форматирования), но не может принадлежать обоим. Блочные блоки форматируются в BFC (контекст блочного форматирования), а встроенные блоки форматируются в IFC (внутренний контекст форматирования). Любой визуализированный элемент создает блок, который может быть либо блочным блоком, либо встроенным блоком. Даже текст, который не заключен в какой-либо элемент, будет генерировать анонимные блочные блоки или встроенные блоки в зависимости от ситуации.
Приведенное выше описание можно понимать так: поместите все элементыбросить все этоФорматируется в соответствующем FC (контекст форматирования).
Задумывались ли вы когда-нибудь, существуют ли какие-либо элементы, не принадлежащие ни к одному виду FC?
//代码一
<div style="overflow:hidden">
<div></div>
</div>
Нет сомнения, что внутренний слой в приведенном выше кодеdivотносятся к внешнему слоюdivсоздал BFC, затем внешний слойdivШерстяная ткань? Принадлежат этому ФК. Давайте посмотрим на код два.
//代码二
<div>
<div></div>
</div>
Внутренний слой приведенного выше кодаdivи внешний слойdivОдинокий, он принадлежит этому ФК.
Ты немного смущен в это время, не смущайся,Одно из условий срабатывания BFC: корневой элемент htmlПриходите на помощь.
Затем внутренний слой в коде одинdivотносятся к внешнему слоюdivСоздан BFC, внешний слойdivBFC, созданный корневым элементом html.
Внутренний слой в коде дваdivи внешний слойdivВсе принадлежат BFC, созданному корневым элементом html.
Вернитесь и посмотрите на код в начале
<body>
<div>
<div style="width:100px;height:100px;background:red;margin:20px;"></div>
<div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</div>
</body>
верхний наружный слойdivНе BFC, тогда два внутренних слояdivОн по-прежнему принадлежит BFC, созданному корневым элементом html, и находится в том же BFC, и поля по-прежнему перекрываются.
Одним словом, если родителем элемента не является BFC или IFC, то он будет переходить к родителю родителя, пока не найдет элемент, запускающий BFC или IFC. (FFC пока не обсуждает это здесь)
3. Об использованииoverflow：hiddenВопрос о том, что BFC элемента body не может быть запущен
Сначала процитируйте фрагмент оригинального определения BFC от w3c.
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
Он описывает элемент уровня блока, который создаст BFC, если переполнение не видно.
Но обратите внимание на предложение **, за исключением случаев, когда это значение было передано в область просмотра** можно перевести какесли значение не распространилось на область просмотра.
Тогда давайте посмотримoverflowИсходный текст определения w3c
UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.
перевести его
- Пользователям необходимо поместить атрибут переполнения в корневой элемент над областью просмотра.
- Поведение переполнения: когда корневой элемент является элементом html и переполнение видно, а элемент html имеет тело в качестве дочернего элемента, ПА необходимо применить свойство переполнения над первым телом к области просмотра.
- overflow: visible for viewports будет преобразовано в overflow: auto.
- Поведение распространения переполнения приведет к тому, что свойство переполнения тела будет видимым.
Увидев это, мои друзья должны понять.
Атрибут переполнения по умолчанию элемента html:visible, в результате чего элемент bodyoverflow:hiddenПрименяется область просмотра, в результате чего окончательное свойство переполнения элемента тела становится видимым и, следовательно, не вызывает BFC тела.
Таким образом, вы можете только сначала установить атрибут переполнения элемента html наhidden, а затем установите для атрибута переполнения элемента body значениеhidden, чтобы тело запускало BFC.