CSS 布局与常规流简介

一、布局（Layout）是什么? 

• 确定内容的大小和位置的算法。
• 依据元素、容器、兄弟节点和内容等信息来计算。

二、布局相关技术

• 常规流
• 浮动
• 绝对定位

1. 常规流 Normal Flow

        流：在 CSS 的常规的流里边，元素是按照某种流向去摆放的，比如从上到下、从左到右，所以常规流在许多文档里边也叫文档流，或者简称流。

1. 根元素、浮动和绝对定位的元素会脱离常规流
2. 其它元素都在常规流之内（in-flow）
3. 常规流中的盒⼦，在某种排版上下⽂中参与布局

相关的排版上下文有：

① 行级排版上下文（也叫⾏内格式化上下文）

② 块级排版上下文（也叫块级格式化上下文）

③ Table 排版上下文

④ Flex 排版上下文

⑤ Grid 排版上下文

1.1 行级排版上下文

• Inline Formatting Context （IFC）
• 当IFC中有一个块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。
• 只包含⾏级盒⼦的容器会创建⼀个 IFC，比如有一个 h1 标签，里边有文字，浏览器就会在 h1 里边创建 IFC，h1 里边的文字就会在 IFC 里边进行排版，之所以会创建 IFC 是因为 h1 是一个块级元素 ，h1 里边有文字，文字是行级的，没有其他的东西，这时候就只包含行级盒子的容器它会创建 IFC。
• IFC 内的排版规则

           1）盒⼦在一行内⽔平摆放

           2）一行放不下时，换⾏显示（overflow-wrap: break-word;单词过长就在单词内换行）

           3）text-align 决定一行内盒⼦的⽔平对齐

           4）vertical-align 决定⼀个盒⼦在行内的垂直对齐

           5）避开浮动(float)元素 * 

1.2 块级排版上下文

 1）Block Formatting Context (BFC)

 2）某些容器会创建⼀个BFC

• 根元素
• 浮动、绝对定位、inline-block
• Flex⼦项和 Grid ⼦项
• overflow 值不是 visible 的块盒

1.2.1 BFC 内的排版规则

• 盒⼦从上到下摆放
• 垂直 margin 合并
• BFC 内盒⼦的 margin 不会与外⾯的合并
• BFC 不会和浮动元素重叠