CSS之标准流

一、文档流

文档流：也叫标准流，是标签在页面的默认排列规则。例如块级标签独占一行，行内标签一行显示。文档流里面的限制非常多，导致很多页面效果无法实现。

二、文档流带来的问题

文档流之所以会被淘汰，主要因为它存在很多问题，让布局效果变差以及增加开发难度。所以接下来了解一下文档流会出现哪些问题给开发带来哪些不变之处。

2.1 页面内容底边对齐，高矮不齐

块级标签和行内标签同时存在，文字内容跟随图片内容的底边进行对齐，导致两者高度上存在差异，页面效果极差。

<style>
   div{
       border: 1px solid skyblue;
   }
   img{
      height: 300px;
   }
</style>

<div>
    <span>我是文本内容</span>
    <img src="/img/xz.jpeg">
</div>

2.2 多个空格被折叠为一个

即使代码中输入了多个空格，但是在页面中只会呈现出一个。

<style>
   div{
      border: 1px solid skyblue;
    }
   img{
      height: 300px;
    }
</style>
</head>

<div>
    <span>我是文本      内容</span>
    <img src="/img/xz.jpeg">
</div>

三、脱离文档流

要想脱离文档流有两种方法，分别是：浮动和flex布局。常用的是flex布局。在后续文章当中会详细解释。