文本流、文档流

Posted 2023-03-05

参考技术A

文本流：
文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式。

脱离文档流的情况：
1、float 浮动
浮动会脱离文档流而不会脱离文本流，其他盒模型中的文字还是会为其让出位置，> 环绕在其周围
2、position：absolute/fixed 绝对定位
绝对定位会使元素脱离文档流同时脱离文本流，其他盒模型元素和其中的文字的排> 列都会忽略它

文档流和文本流可以理解为定位/位置

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
元素在文档流中的特点
1.文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
2.浮动(float)、绝对定位(absolute)、固定定位(fixed)三种方式定位会脱离文档流。 同时上面的两种定位还能让浮动失效。
3.元素分为三种大的类型 块状 内联 内联块 每一种有自己的特性。

块状：独占一行 在父元素内一行内只有它自己，不能放下其它元素。支持所有css样式 。
默认继承父元素100%的宽（不设宽）

内联(行内元素)：内容撑开宽度 ，不独占一行。可以设置宽高，但不会有作用，可以设置左右的margin,border,padding。

脱离文档流会发生什么呢？

分为两种等级：块级元素和行内元素

内联元素文档流

内联元素的文档流是从左往右流动的，当一行满了之后会另起一行从新开始

1).与其他元素并排2).不能设置宽、高。默认的宽度就是文字的宽度

块级元素文档流

块级元素文档流是从上往下依次流动的，每个块级元素占满一行

1).霸占一行，不能与其他任何元素并列2).能接受宽、高3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

脱离文档流

float使用

浮动元素是如何定位的

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移到碰到了所处的容器的边框，或者碰到了 另外一个浮动的元素 。

浮动属性

[if !supportLists]1. [endif]只有横向浮动，并没有纵向浮动。2.当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。3.会将元素的display属性变更为block

浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。5.浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）

清除浮动

1.父元素高度塌陷

子元素浮动，父元素没有设置高度，子元素就无法撑开父元素 ，父元素高度就为0。

2.元素浮动后影响到其他同级元素或者父元素元素的内容文字

前面提到过文档流和文本流，一个元素的内容文字等就是文本流。元素浮动后上升一个高度到文本流，给一个父元素内的子元素浮动后，父元素的文字会对浮动元素进行环绕。

浮动元素只能影响写在他后面的元素，两个块状同级元素，给第一个浮动，就会遮盖第二个元素。