文本流：
文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式。
脱离文档流的情况：
1、float 浮动
浮动会脱离文档流而不会脱离文本流，其他盒模型中的文字还是会为其让出位置，> 环绕在其周围
2、position：absolute/fixed 绝对定位
绝对定位会使元素脱离文档流同时脱离文本流，其他盒模型元素和其中的文字的排> 列都会忽略它
文档流和文本流可以理解为定位/位置
文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
元素在文档流中的特点
1.文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
2.浮动(float)、绝对定位(absolute)、固定定位(fixed)三种方式定位会脱离文档流。 同时上面的两种定位还能让浮动失效。
3.元素分为三种大的类型 块状 内联 内联块 每一种有自己的特性。
块状：独占一行 在父元素内一行内只有它自己，不能放下其它元素。支持所有css样式 。
默认继承父元素100%的宽（不设宽）
内联(行内元素)：内容撑开宽度 ，不独占一行。可以设置宽高，但不会有作用，可以设置左右的margin,border,padding。
脱离文档流会发生什么呢？
- 1.会打乱元素的排序规则，设置浮动，定位后会按照自己设置的属性值来摆放
- 2.让各类型元素失去原来各自的特性，变成同一种元素。
浮动会让元素有块元素部分性质，如：支持所有css样式，子元素和内容能撑开自身（不设置） 。 但是不会独占一行，不能继承父元素宽高。（给元素只设置高，然后浮动元素，元素会因为没有宽度而无法显示）
对于父元素来说，脱离了文档流的子元素不能再撑开父元素了，所以会出现高度塌陷的问题。
标准文档流等级
分为两种等级：块级元素和行内元素
内联元素文档流
内联元素的文档流是从左往右流动的，当一行满了之后会另起一行从新开始
1).与其他元素并排2).不能设置宽、高。默认的宽度就是文字的宽度
块级元素文档流
块级元素文档流是从上往下依次流动的，每个块级元素占满一行
1).霸占一行，不能与其他任何元素并列2).能接受宽、高3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽
脱离文档流
float使用
浮动元素是如何定位的
当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移到碰到了所处的容器的边框，或者碰到了另外一个浮动的元素。
浮动属性
[if !supportLists]1. [endif]只有横向浮动，并没有纵向浮动。2.当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。3.会将元素的display属性变更为block
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。5.浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）
清除浮动
1.父元素高度塌陷
子元素浮动，父元素没有设置高度，子元素就无法撑开父元素 ，父元素高度就为0。
2.元素浮动后影响到其他同级元素或者父元素元素的内容文字
前面提到过文档流和文本流，一个元素的内容文字等就是文本流。元素浮动后上升一个高度到文本流，给一个父元素内的子元素浮动后，父元素的文字会对浮动元素进行环绕。
浮动元素只能影响写在他后面的元素，两个块状同级元素，给第一个浮动，就会遮盖第二个元素。
