这几天复习了英语，高数，也考完四级了。

这两天开始写了课设的项目，选的是捷住宝，我打算用链表和搜索树。写着写着总是出问题，然后改Bug。还差删除信息和文件操作，还是尽量写好一些。

明天考英语，再花一上午复习一下英语。

文档流

文档流是文档中可显示对象在排列时所占用的位置/空间

例如：块元素自上而下摆放，内联元素从左到右摆放

标准流中的限制很多，导致很多页面无法实现

• 高矮不齐，底边对齐
• 空白折叠现象
  • 无论多少个空格，换行，tab，都会折叠为一个空格
  • 无论我们想要img标签之间没有空隙，必须紧密连接

文档流产生的问题

高矮不齐，底边对齐

 

<span>文本内容</span>
<img src="1.jpg" alt="">

    <style>
        img{
            width: 300px;
            height:300px;
        }
    </style>

空格折叠

<span>文本          内容</span>
<img src="1.jpg" alt="">

    <style>
        img{
            width: 300px;
            height:300px;
        }
    </style>

元素无空隙

    <span>文本          内容</span>
    <img src="1.webp" alt=""><img src="1.webp" alt="">

脱离文档流

是一个元素脱离标准文档流有三种方式：

• 浮动
• 绝对定位
• 固定定位

浮动

定义

float属性定义元素在哪个方向浮动，任何元素都可以浮动

 浮动的原理：

• 浮动以后是元素脱离了文档流
• 浮动只有左右浮动，没有上下浮动

元素向左/右浮动

脱离文档流之后，元素相当于在页面上增加一个浮层来显示内容，此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出翔折叠的现象。

<div class="box"></div>
<div class="container"></div>

        .box{
            width:200px;
            height: 200px;
            background-color: aquamarine;
            float:left;
        }
        .container{
            width: 400px;
            height: 400px;
            background-color: blue;
        }