css文档流
目录
文档流？
脱离文档流
1.浮动
设置浮动
清除浮动
定位（position）
绝对定位：
固定定位：
Z-index
文档流？
CSS 文档流（Normal Flow），也称为常规流或普通流，是指浏览器在未应用浮动（float）、定位（position）等脱离文档流的布局方式时，元素按照它们在 HTML 中的顺序，从上到下、从左到右依次排列。在这个过程中：
-
块级元素（block-level elements）：如
<div>、<p>、<h1>等，默认独占一行，宽度默认撑满父容器（100%），可以设置宽高。 -
行内元素（inline elements）：如
<span>、<a>、<strong>等，默认在同一行内依次排列，不能直接设置宽高（宽高由内容决定）。 -
行内块元素（inline-block）：比如设置了
display: inline-block的元素，可以在一行内排列，但又能设置宽高。
问题：
1.高矮不齐，底边对齐
2.空格会出现折叠现象
3.img标签有空隙
因此为了解决这些问题，我们要：脱离标准流（文档流）！
脱离文档流
三种方式：
- 浮动
- 绝对定位
- 固定定位
1.浮动
浮动最初是为了实现文字环绕图片的效果，但后来被广泛用于多栏布局
只有左右浮动没有上下浮动
设置浮动
增加一个float:left就会从左边这样变成右边这样
两张图片之间的空隙也没了
但并不是干嘛都要脱离文档流的，是你需要再脱。
上面都是只有两个东西，要是有一堆呢？
加一个float:left;就会从这样变成那样
》》》》
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{height: 200px;width:200px;float:left;}.box1{background-color: red;}.box2{background-color: green;}.box3{background-color:aqua;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body>
</html>清除浮动
还要清除浮动，那索性别用不就行了，醉了
浮动副作用：
1.浮动会造成父元素高度塌陷
不用浮动时，如果不设置父元素高度的话，父元素的高度就是子元素撑开的高度。
若是设置一个浮动，此时父元素的高度为0
2.后续元素会受到影响
在上面加了一个浮动之后我再加内容就会受到影响
例如我在后面加一个text
解决问题：
1.父元素设置高度
简单粗暴，但是他还是不管下面添加的东西是否影响
2.受影响的元素增加clear属性
直接在受影响的元素添加clear:left；(清除左浮动）clear:right;(清除右浮动)clear:both;(管他什么浮动都清除）
3.overflow清除浮动
有的人就是要求多，我就不要设置高度，还不影响，那就用overflow。
父级元素不能设置高度，父级加：overflow:hidden;clear:both;（两个都要写）
4.伪对象方式
如果父级元素塌陷，且影响同级元素，则为父级标签添加伪类像这样：
定位（position）
四个方向：left、top、right、botton
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
固定定位和绝对定位可以脱离文档流
相对定位：
距离左侧200px距离顶部100px
绝对定位：
就会发现和上面浮动一样出现后续元素受到影响。但是跟浮动不一样的是，他每设置一个新的元素就是一层，会覆盖。而浮动只有两层：标准流，浮动
固定定位：
就是把上面position:absolute；改为position:fixed
它和绝对定位不一样的是：无论页面如何滚动他的位置是固定的
设置定位之后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文件。
Z-index
设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素的前面。（就是设置一个顺序，数字越小就先执行，所以数值越大越靠前）
.element {position: absolute;z-index: 10; /* 数值越大越靠前 */
}⚠️ 注意：
z-index只在定位元素（非 static）上有效默认
z-index是auto，相当于0
z-index的比较只在同一个层叠上下文中有效