文档流、文本流以及定位方式的理解

1、文档流（普通流 normal flow）

符合HTML中标签本身含义，遵循自上而下，从左至右的布局。
那么什么是符合HTML中标签本身含义呢？
众所周知，HTML标签，也称为HTML元素分为块级元素和行内元素，块级元素独占一行，而行内元素可以在一行内从左至右排列，不会换行。

1）块级元素大多为结构性标签：
div、table、form、ul、ol、dl、marquee(滚动文本)、blockquote(段落缩进)、pre(预格式化)、p、h1~h6、hr(水平分割线)
①块级元素宽度高度可设置值；
②块级元素宽度未设置时，默认100%；
③块级元素中可以包含块级元素和行内元素；
④块级元素独占一行；
2）行内元素大多为描述性标签：
span、a、b、strong、sup、sub、i、em、del、u、input、textarea、select、img、br(换行)
①行内元素宽度高度内边距不可设置；
②行内元素宽度和高度就是内容的宽度和高度；
③行内元素中只可以包含行内元素，不可以包含块级元素；
④行内元素不会换行；

2、文本流

文本流和文档流的定义本质是相同的，文档流是相对于盒子模型讲的，而文本流是相对于HTML中的文字段落来讲的。
概括的说就是文档对一系列字符的读取和输出的顺序，和文档流一样自上而下，从左至右排列。

3、定位方式

①文档流定位（不脱离文档流）
包含三种类型：块级元素定位、行内元素定位、元素相对定位（position:relative）
②浮动定位（脱离文档流，不脱离文本流）
有一个元素A（图片中黑色背景元素），利用float脱离文档流的时候，其他的盒子元素会无视元素A所占空间，但是其他元素中的文字却不会无视元素A，依然会为A让出位置，环绕在其周围。这时候就说元素A脱离了文档流，但是没有脱离文本流。

浮动之前效果图：

浮动之后效果图：

③绝对定位（既脱离文档流，又脱离文本流）
使用position:absolute

使用position:fixed

使用以上两种绝对定位方式，发现文字也不再围绕元素A了，这说明这时候元素A不仅脱离了文档流，也脱离了文本流。

总结：

浮动布局会使元素脱离文档流，不脱离文本流。元素无视它的存在，而元素其中的文本会围绕在它周围，但是它不会脱离DOM树，用浏览器的审查元素可以看到脱离文档流的它。
绝对定位 position: absolute 和 position: fixed 布局会使元素既脱离文档流，又脱离文本流。（元素和文本都定位不到它的存在）。

position:fixed是position:absolute的一个子级，两者都是绝对定位。