一、文档流
文档流，即块级元素从上至下，行内元素从左至右的排列显示
🍂块级：独立一行，可以自动换行，可以设置宽高、margin等
🍂行内：不自动换行，设置宽高无效，margin左右方向有效padding都有效
🍂行内块级：不自动换行，可以设置宽高
二、定位与脱离文档流
1.相对定位
设置position:relative，依据自身定位。相对定位时，元素不能层叠，仍然占据原来的空间。
2.绝对定位
设置position:absolute，以父元素（依据最近一层的定位元素定位-position为relative/absolute/fixed，或body）左上角原点为定位基准点，会脱离文档流。
如果具有不同z-index属性的对象已经占据了给定的位置，他们之间不会影响会产生层叠
3.固定定位
设置position:fixed，相对于视区进行偏移，脱离文档流。
4.浮动
脱离文档流，相对于父元素定位，然后从文档流中抽出并尽可能的移动较远位置。当一个元素脱离文档流之后，其他元素将会填补原来的位置。
但是，如果浮动元素与行内元素相遇，「行内元素不会占用浮动元素的空间，就会导致父元素塌陷」
🌼解决高度坍塌：清除浮动
①在浮动元素后添加一个空标签并设置{clear:both}
②给浮动元素的容器添加一个:after伪元素,content:"",display:block，clear:both
5.display:none
也会脱离文档流，不占据页面空间
三、BFC
块级格式化上下文，是一块独立的渲染区域，内部元素不会影响边界以外的元素，浮动元素会回到文档，撑开父容器的高度。
触发方法：
①有float
②position为absolute、fixed
③overflow不是visible
④display为flex、inline-block等
margin会产生纵向重叠，如果不希望纵向重叠可以在让一个容器套一层BFC
四、堆叠显示z-index
✨层叠上下文
元素在同一个上下文内，相当于一组。
页面根元素天生具有层叠上下文，称之为“根层叠上下文”
层叠上下文的创建
- position为非static并设置z-index
- flex/grid的子元素，并且z-index不是auto
- opacity<1
- ttansform/filter属性不为none
- isolation,不需要规定z-index并且不会影响到子元素的渲染
✨层叠等级
在同一层叠上下文之中的元素，根据z-index大小在z轴排序。
如果另一个层叠上下文父元素z-index高，则当前层叠上下文内的子元素z-index再高也不生效
✨层叠顺序
z-index>=0 》 内容 》 浮动 》 块级 》 z-index<0
