前言

说起文档流，一脸懵逼，这啥东东？网页是由各种HTML元素组成的，这些元素在计算布局排版的过程中,会自动的按照从左到右(行内元素),从上到下(块级元素)的规则排列。

这样的一个标准规则就是文档流，不同的浏览器有稍微差异，尤其是过去的IE浏览器，很庆幸现在不需要太了解这些差异，知道就行了。

如下示例：

浏览器会按照如上规则排版网页，标准文档流有以下几种特性：

1. 空白折叠现象
2. 高矮不齐，底边对齐
3. 自动换行，一行排不满，会换行

在这里就涉及到几个概念：格式化上下文( Formatting context )。

格式化上下文

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

简单理解，就是定义了布局规则的一片区域。它的类型包括：

• Block Formatting Context，简称BFC——块级格式化上下文
• Inline Formatting Context，简称IFC——行内格式化上下文
• Flex Formatting Context，简称FFC——flex格式化上下文
• Grid Formatting Context，简称GFC——栅格格式化上下文

关于这方面的知识，后面会详细介绍，你也可自行查询相关资料。

有三种影响元素布局的方法：

• display —— 显示模式
• Float —— 浮动
• position —— 定位

如上图，默认情况下块级元素从上到下布局，行内元素从左到右布局，如果想改变其中某些元素的布局，可以使用以上几种方法改变文档流默认行为。

display 显示模式

display 属性它有如下几个值：

1. display:none;　隐藏不占位置
2. display:block;　块级元素
3. display:inline;　行内元素
4. display:inline-block;　行内块级元素

如下示例：

显示效果：

从上图可以看到第一个块级元素不显示。

隐藏元素—— display:none

display: none 和 visibility：hidden 一样都可以隐藏元素。它们的区别是，前者不占据文档流中空间，后者仍然占据一块空间，如下图示例：

class="vhide"的元素，看不见但却占据了一块空间。

块级元素 —— display:block

块级元素独占一行，从上到下排列，可以设置宽和高，如果不设置宽度，那么默认宽度是父类的宽度的100%。

如下图中的黄色区域：

常见块级元素有div、h系列、li、dt、dd等，定义容器的标签。

行内元素 —— display:inline

行内元素和其他行内元素可以并排，一行不够时会自动换行，不能设置宽、高，默认的宽度，就是其元素内容的宽度；

如下示例：

<span style="width:100px;heidht:100px;">行内元素</span>
<div style="width:100px;heidht:100px;">块级元素</div>

如下图绿色区域，宽度和高度没有起作用：

常见行内元素有 span、a、b、i、u、em等，这些元素大多是描述文本的标签，除了段落p标签比较特殊，它是块级元素。

在图3中你是否看到块重叠了，这是什么原因？

其原因是行内元素设置了padding 填充，行内元素的宽度和高度只能是其内容的区域的宽高，在文档流中虽然行内元素的padding 起作用了，但是在垂直方向上会和相邻的块元素出现重叠，也就是padding 填充这部分会覆盖其它元素，所以要尽量避免使用，解决方法就是把行内元素转换成块级元素。

行内块级元素 —— display: inline-block

行内块级元素，是一种特殊的行内元素，同样是从左到右排列，和 display:inline 不同之处有以下几点：

1. 不会出现padding重叠现象。
2. 可以设置宽度和高度。

如下示例：

显示效果：

如图10中红色区域就是块级元素，它设置了宽度、高度和padding填充，但是它没有重叠。但是它又和行内元素一样并排排列。

float 浮动 和 position 定位

这二种属性也可以改变文档流中的元素，可以使元素从文档流中脱离。

脱离文档流,指的是元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。

浮动(float)与绝对定位(position)之间的区别就是：

1. 浮动会使元素脱离文档流,但是不会脱离文本流,在于其他盒子的文本内容计算布局的时候,还是占位置的。
2. 绝对定位会使元素脱离文档流,同时也会脱离文本流, 在于其他盒子的文本内容计算布局的时候,不占位置。

什么是文本流？

简单来说就是元素内部的一系列的字符的排列规则，就是文本流。注意和文档流的区别。

float 浮动，如下示例：

块级元素3没有浮动：

设置浮动后：

块级元素3脱离了原始文档流，浮动到右边了。

定位 position 的示例：

position:absolute;
top:0;
left:0;

如上图，块级元素3脱离文档流，显示到上面去了，position 定位有相对定位、绝对定位、fixed定位，它们的都会相对不同的父元素作为基准点坐标。

结论

通过本文学习，主要讲到以下几点内容：

1. 浏览器中HTML元素按照一定的规则排列，这样的规则排列方式称为文档流。
2. 格式化上下文，它有几种？
3. 行内元素和块级元素概念，及它们有什么区别？
4. 可以使用display（显示），float（浮动），定位（position）改变文档流中的元素定位及显示。

要想学会网页布局，这节所讲的知识需要完全掌握，非常重要，重在理解它的原理，这样才能游刃有余。关于浮动和定位由于涉及的知识太多，将会在之后分别单独介绍。

感谢您的阅读，欢迎指正错误，补充。

上篇：前端入门——css边框和圆角