css文档流 - 技术栈

文档流？

脱离文档流

1.浮动

设置浮动

文档流？

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;就会从这样变成那样

》》》》

html 复制代码

<!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

设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素的前面。（就是设置一个顺序，数字越小就先执行，所以数值越大越靠前）

html 复制代码

.element {
  position: absolute;
  z-index: 10;  /* 数值越大越靠前 */
}

⚠️ 注意：

z-index只在定位元素（非 static）上有效

默认 z-index是 auto，相当于 0

z-index的比较只在同一个层叠上下文中有效