1

参考:https://www.w3.org/TR/CSS21/v...
在讲BFC之前,先来了解一下CSS2.1规范里面的一个关于元素的定位规则(positioning schemes),主要有三种:常规文档流,浮动,绝对定位。
1: 常规文档流(Normal flow):常规文档流包含三种情况:

1: 块级盒元素(block-level boxes)的块级格式(block formatting)
2: 行内盒元素(inline-level boxes)的行内格式(inline formatting)
3: 块级盒元素和行内盒元素的相对定位

2: 浮动(Floats):

1: 第一步:先按照常规文档流的规则定位
2: 第二步:从文档流里面抽离出来,最大化地靠左或者靠右
3: 浮动的元素对后续的元素定位有影响

3: 绝对定位(Absolute positioning):

1: 绝对定位包括 'position: absolute'和'position: fixed'
2: 绝对定位的元素从文档流里面彻底地抽离出来,对后续的元素定位没有影响
3: 绝对定位的元素最终的位置取决的‘top’,'right', 'bottom', 'left'设置的值。而这些值都是相对其父元素来说的。

在上面的第一点里面我们已经提到了一个概念叫:block formatting。那什么又是Block Formatting Context呢?这里先看看MDN是给出的定义:

A block formatting context is a part of a visual CSS rendering of a
Web page. It is the region in which the layout of block boxes occurs
and in which floats interact with each other.

额,看完之后,我脑袋里面只有一个想法: What is that?
不如先不去追究这个概念,先来看看在哪些情况下,会创造BFC:

1:根元素
2: 浮动元素:float的值不是‘none’的元素
3: 绝对定位元素:(position: absolute 或者 position: fixed)
4: 行内块级元素:(display: inline-block)
5: 表格单元格(table cells):(display: table-cell,也是 HTML table cells的默认值)
6: 表单标题(table captions): (display: table-caption, 也是HTML table captions的默认值)
7: 块元素(block element)当overflow为非'visible'的其他值:auto, hidden, initial, overlay, scroll. 当overflow:inherit, 这时候取决于最终继承到的值。
8: display: flow-root的元素
9: column-span: all的元素

看完了上面产生BFC的各种情况,现在再来看看BFC到底有些什么规则:
1: 在一个块元素格式上下文(BFC),这些盒子(boxs)从父元素(容器元素)的顶端垂直地一个接一个排列
2: 两个相邻元素的垂直间距(margin)会折叠(collapse)
3: 每一个元素的左边界紧贴着容器元素的左边界(当然这是针对从左到右排列的元素,从右到左排列的元素那就是又边界紧贴着容器元素的右边界)。


nanaistaken
583 声望43 粉丝