标签：eve   ini   isp   org   viewport   从右到左   外边距叠加   href   显示   

Block formatting contexts

W3C关于BFC的描述见block-formatting

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.

浮动（float），绝对定位元素（absolute, fixed），非块盒子的块容器（如inline-block，table-cell和table-caption），和块盒子的overflow值为非visiblity(可以是auto，hidden)的元素，将创建块级格式上下文。

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin‘ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

在块格式上下文中，从块容器的顶部开始，把盒子一个接一个的垂直排列。两个相邻的盒子的垂直距离由margin属性确定，在块格式上下文中相邻块级盒子的垂直外边距会重叠。

In a block formatting context, each box‘s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box‘s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
在块格式上下文中，每个块级盒子的左外边缘会和容器块的左边缘接触（从右到左的格式中，右边缘接触），即使存在浮动也会如此，除非该块级盒子建立一个新的块级格式上下文，由于浮动，盒子会变窄。

通过实例来直观理解上面的现象

垂直外边距重叠

块盒子和其容器左边缘接触

从右到左的格式中，右边缘接触

块格式上下文的建立要素

参见MDN 块格式化上下文 - Web 开发者指南 /| MDN

总结创建块级格式化上下文的方式分2类：

• 本身具备块级格式化上下文的元素
  • 根元素（html）
  • 行内块元素（如button或设置display: inline-block的元素）
  • 表格元素或匿名表格元素（如td,table-cell,table-caption）。
  • 弹性元素（display: flex | inline-flex)里的直接子项目；
  • 网格元素（display: grid | inline-grid)里的直接子项目；
• 设置css触发条件
  • 浮动元素（float: [left | right]）；
  • 绝对定位元素（position: [absolute | fixed]）；
  • 块元素设置overflow为非默认值visiblity,如hidden,auto, scoll等；
  • display: flow-root的元素

为什么要创建块格式上下文

BFC规范决定元素其内容的定位，及和其他元素的关系和相互作用。

那么我们为什么要这么执着块级格式化上下文呢，块盒子在块级上下文格式化上下文中会发生什么现象呢？

• 块盒子在块级格式化上下文容器中会出现垂直外边距重叠的现象。
• 块盒子在块级格式化上下文容器中会和父元素的左边缘接触(从右到左的格式中，右边缘接)。

解决垂直外边距重叠问题

垂直外边距重叠并不是一无是处，设计之初是为了适应文档的书写习惯，比如在我们设置段落的间隔是1倍外边距，如果没有外边距重叠，那么在WEB中出现外边距叠加就会出现2倍段落外边距，外边距重叠方便了排版，但有时我们又不希望外边距重叠，那么如何解决外边距重叠问题

根据规范属于同一个BFC内的块盒子垂直外边距会重叠，除非为该元素建立新的BFC和其他块盒子分别属于不同的BFC容器中。

使用BFC容器包裹浮动元素

我们在使用浮动元素时经常会碰到一个问题，块容器中有浮动元素会出现高度坍塌问题。目前比较流行的解决方案就是使用clearfix清除浮动方案。

另一种方案就是建立BFC来规范容器的高度，避免高度坍塌。

避免浮动元素文字环绕

块元素默认总是会挨着父容器的边缘，即使存在浮动元素，也会接触父容器边缘，以下示例中通过给块元素建立BFC让元素不接触父容器的边缘，实现文字不环绕效果，浮动元素有50%的透明度，可以看到段落在没有BFC的情况下是在浮动元素的下方，但段落中的文字和浮动元素并排显示，出现文字环绕效果，通过建立BFC段落的宽度边小了，段落空间被浮动元素挤压，即出现浮动元素和段落并列显示效果。

CSS基础-BFC块格式上下文

标签：eve   ini   isp   org   viewport   从右到左   外边距叠加   href   显示   

原文地址：https://www.cnblogs.com/iPing9/p/12239092.html