CSS布局的那些事

1. 位置
2. 移动
3. 宽度和高度 即大小
4. css的"图层"
5. BFC
6. position
7. float
8. flex
9. grid
10. 容器的概念
11. 盒子模型
12. scroll、client

---

BFC

BFC规定了内部的Block Box如何布局。
定位方案：

内部的Box会在垂直方向上一个接一个放置。

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

每个元素的margin box 的左边，与包含块border box的左边相接触。

BFC的区域不会与float box重叠。

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

计算BFC的高度时，浮动元素也会参与计算。
---------

满足下列条件之一就可触发BFC

根元素，即 html

float的值不为none（默认）

overflow的值不为visible（默认）

display的值为inline-block、table-cell、table-caption

position的值为absolute或fixed
*   弹性元素display 为 `flex` 或 `inline-flex`元素的直接子元素）
*   网格元素display 为 `grid` 或 `inline-grid` 元素的直接子元素）

---

文档流≈图层
把一个形成了BFC的Box看做是一个图层
处于不同图层的box不会相互影响，即他们的margin、padding等不相互影响，但有覆盖的优先级，哪个在上，哪个在下（z-index）
一个图层可能包含的box类型

1. 普通类型box
2. 形成BFC的box
   2.1float
   2.2position:absolute
   2.3 overflow、flex、grid

---

不同box本身的移动方式和移动的相对点(参照物)
1.普通类型box 通过margin、padding，相对元素本身在父元素中的位置
2.BFC
1.overflow、Flex、grid本身都和普通元素一致
2.position为absolute的。方式top，left。相对位置对第一个定位父元素
3.float。方式left，right。相对位置是父元素

---

处于同一图层的box的相互影响
1.普通类型box margin的相互影响（这个里把flex、overflow、grid也算普通类型，因为它们在同一图层的相互影响方式和普通类型效果一样）
2.普通类型和形成BFC的box的相互影响
3.形成了BFC的但类型不同的box相互影响
4.形成了BFC的相同类型的box的相互影响
同级影响，父子影响（即嵌套）
那么这里就主要关注三个类型：普通类型、float、absolute
从简单的开始
普通类型相互影响不谈。要注意margin坍塌（重叠）问题
absolute：完全不影响，从仿佛本图层上消失，会发生遮盖，本图层（BFC）在计算内容时是不算这个的
float:本图层（BFC）在计算内容时是计算float的（如果父元素形成了BFC那么是计算内容时是计算float的的，但父元素不是BFC时是不计算的）
float也是会脱离本图层，生成图层，和absolute效果相似，但是问题在于文字的环绕，与其他box则就像absolute一样会发生覆盖，但覆盖的是box本身，而不是box里面的内容（被覆盖box里面的box），它会把内容都挤出来,而absolute覆盖了就是覆盖了。

---

注1：所谓图层并不准确，只是一种类比。
注2：BFC许多特性是可以嵌套递归推解的
注3：float难用的问题在于，它在一定程度上是符合BFC特性的。但是又表现出了一些不一致的地方
注4：一些组合手段。目的保持父元素在在父元素图层表现出和普通类型box的一致性，并且创建新的图层（BFC）。比如1.父元素overflow：hidden。2.父元素：relative（方便定位与移动），子absolute。3.使用float为子的直接父元素最好为BFC
注5：用overflow，position，float来进行布局是不推荐的。未来的方向应该还是flex和grid（更加方便，更加合理直观）。但由于浏览器兼容性以及旧api的存在，还是时间来慢慢变化。