一.简介

文档流是文档中可显示对象在排列时所占用的位置/空间 例如：块元素自上而下摆放，内联元素，从左到右摆放 标准流里面的限制非常多，导致很多页面效果无法实现

二.文档流问题

• 高矮不齐，底边对齐

• 空白折叠现象

  • 无论多少个空格、换行、tab，都会折叠为一个空格

  • 如果我们想让img标签之间没有空隙，必须紧密连接

• 元素无空隙

问题展示：

    
    
    
    
​


    我们一起看海景吧
    
    
有多个空格折叠，只显示一个：
    
海景真       好看 哈哈哈哈~
    
元素之间有空隙！
    
    

 

三.问题解决

脱离文档流

使⼀个元素脱离标准文档流有三种方式

1 浮动

2 绝对定位

3 固定定位