CSS 【文档流 BFC块级格式化上下文】学习笔记

文章目录

      • 1. 文档流
      • 2. 三种文档流的定位方案
        • 2.1. 常规流(Normal flow)
        • 2.2. 浮动(Floats)
        • 2.3. 绝对定位(Absolute positioning)
      • 3. BFC触发方式
      • 4. 约束规则
      • 5. 作用
        • 5.1 阻止元素被浮动元素覆盖
        • 5.2 包含浮动元素(闭合浮动)
        • 5.3 阻止多列布局换行的情况
        • 5.4 阻止相邻元素的margin合并

1. 文档流

文档流分为定位流浮动流普通流三种。

普通流指FC(Formatting Context)格式化上下文。它是页面中的一块渲染区域,有一套渲染规则,决定子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC、IFC(行内格式化上下文),还有GFC和FFC。

块级元素: CSS 属性值 display 为 block,list-item,table 的元素。
独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。
每个块级元素都会至少生成一个块级盒,称为主块级盒;一些元素可能会生成额外的块级盒,比如 < li >,用来存放项目符号

行内级元素:CSS 属性值 display 为 inline,inline-block,inline-table 的元素。
可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。

行内块元素(inline-block):结合的行内和块级的优点,既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。
img、input为行内块元素
所有的非可替换行内元素(display 值为 inline-block 或 inline-table)生成的盒称为原子行内级盒,不参与 IFC 创建

BFC(Block Formatting Context)块级格式化上下文,是用于布局块级盒子的一块渲染区域。

一个BFC的范围包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明,一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中,那么就意味着这个元素能与两个BFC中的元素发生作用,就违反了BFC的隔离作用。

2. 三种文档流的定位方案

2.1. 常规流(Normal flow)

在常规流中,盒一个接着一个排列;
在块级格式化上下文里面, 它们竖着排列;
在行内格式化上下文里面, 它们横着排列;

position为static或relative,并且float为none时会触发常规流;

对于静态定位(static positioning):position: static,盒的位置是常规流布局里的位置;

对于相对定位(relative positioning):position: relative,盒偏移位置由top、bottom、left、right属性定义。即使有偏移,仍然保留原有的位置,其它常规流不能占用这个位置。

2.2. 浮动(Floats)

左浮动元素尽量靠左、靠上,右浮动同理。这导致常规流环绕在它的周边,除非设置 clear 属性。

浮动元素不会影响块级元素的布局,但会影响行内元素的布局,让其围绕在自己周围,撑大父级元素,从而间接影响块级元素布局。

最高点不会超过当前行的最高点,它前面的浮动元素的最高点
不超过它的包含块,除非元素本身已经比包含块更宽。

行内元素出现在左浮动元素的右边和右浮动元素的左边。

2.3. 绝对定位(Absolute positioning)

绝对定位方案,盒从常规流中被移除,不影响常规流的布局.
它的定位相对于它的包含块,相关CSS属性:top、bottom、left、right;

如果元素的属性position为absolute或fixed,它是绝对定位元素;
(固定定位fixed,包含块为浏览器视窗

对于position: absolute,元素定位将相对于上级元素中最近的一个relative、fixed、absolute,如果没有则相对于body;

3. BFC触发方式

根元素,即HTML标签

浮动元素:float值为left、right

绝对定位元素:position值为 absolute、fixed

display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

overflow值不为 visible,为 auto、scroll、hidden

display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell,是这个匿名的table-cell生成了BFC。

4. 约束规则

生成BFC元素的子元素(即内部的盒)会一个接一个的放置。

垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性。
在同一个BFC中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
即,属于同一个BFC的两个相邻Box的margin会发生折叠,不同BFC不会发生折叠。

生成BFC元素的子元素中,每一个子元素左外边距与包含块的左边界相接触(对于从右到左的格式化,右外边距接触右边界),浮动元素也是如此,除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。
这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界
BFC的区域不会与float的元素区域重叠。计算BFC的高度时,浮动子元素也参与计算。

5. 作用

BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素。

5.1 阻止元素被浮动元素覆盖

一个正常文档流的block元素可能被一个float元素覆盖,挤占正常文档流,因此可以设置一个元素的float、display、position值等方式触发BFC,以阻止被浮动盒子覆盖。

5.2 包含浮动元素(闭合浮动)

通过改变包含浮动子元素的父盒子的属性值,触发BFC,以此来包含子元素的浮动盒子,但不能阻止其它形式的脱离文档流的元素覆盖正常流元素。

5.3 阻止多列布局换行的情况

有时候因为多列布局采用小数点位的width导致因为浏览器因为四舍五入造成的换行的情况,可以在最后一列触发BFC的形式来阻止换行的发生。(overflow:hidden)

5.4 阻止相邻元素的margin合并

属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠,这里给任一个相邻块级盒子的外面包一个div,通过改变此div的属性使两个原盒子分属于两个不同的BFC,以此来阻止margin重叠。

你可能感兴趣的:(前端)