HTML中的文档流

https://blog.csdn.net/ld16631069828/article/details/118852570

文档流
什么是文档流？
文档流：页面从上往下一行一行，其中每行从左至右的顺序，这种排列方式成为文档流。

什么是脱离了文档流？
脱离文档流意味着它的排列顺序不遵循正常情况下文档的排列顺序，已经脱离了文档流，它不占用空间，处于浮动状态，脱离了文档流的元素的定位相对于其正常情况下的文档流，所以处于正常文档流的元素会占用原先的空间。

脱离文档流的几种情况？
首先是float
1.先说一下，float使得元素脱离文档流，该元素也可以理解为不占用空间了，那么处于正常情况下的元素就占用了它的空间，所以通过下面的例子演示一下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float学习</title>
        <style type="text/css">
            .firstDiv
            {
                width: 100px;
                height: 100px;
                background-color: #FF0000;
                float: left;
            }
            .secondDiv
            {
                width: 150px;
                height:150px;   /*为了更能看到效果设置两者宽度不一样*/
                background-color: #7FFFD4;
            }
        </style>
    </head>
    <body>
        <div class="firstDiv">
            红框
        </div>
        <div class="secondDiv">
            蓝绿
        </div>
    </body>
</html>

　　效果展示：

给红div加上了float效果，红div就脱离了文档流，蓝绿div是还遵循正常的文档流，所以占据正常的文档流。

其次是absolute（绝对定位）

absolute（绝对定位），他是根据父级的对位而定位的，如果父级的没有定位会向更高级的父级查看，值得注意得是这个，absolute的父级定位不能是static属性，（不加定位的默认属性）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float学习</title>
        <style type="text/css">
            .firstDiv
            {
                width: 100px;
                height: 100px;
                background-color: #FF0000;
                position: absolute;
                top: 20px;
                 
            }
            .secondDiv
            {
                width: 150px;
                height:150px;
                background-color: #7FFFD4;
            }
        </style>
    </head>
    <body>
        <div class="firstDiv">
            红框
        </div>
        <div class="secondDiv">
            蓝绿
        </div>
    </body>
</html>

　　效果展示：

可见absolute和float还是有一定区别的，absolute的会完全脱离文档流，包括容器中的内容，absolute定位是相对于父级来定位的。

再者就是fixed定位

fixed脱离文档流，位置与文档流无关，相对浏览器窗口也就是（html）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float学习</title>
        <style type="text/css">
                        .firstDiv
            {
                width: 100px;
                height: 100px;
                background-color: #FF0000;
                position: fixed;        /*相对浏览器窗口*/
                top: 50px;

            }
            .secondDiv
            {
                width: 150px;
                height:1500px;
                background-color: #7FFFD4;
            }
        </style>
    </head>
    <body>
        <div class="firstDiv">
            红框
        </div>
        <div class="secondDiv">
            蓝绿
        </div>
    </body>
</html>

　　效果展示：

可见position中的fixed完全脱离了文档流，相对于窗口位置固定。