文档流、文本流、定位流、浮动流、脱离文档流

文档流

文档流(Normal flow)也称为常规流,普通流。

从直观上理解,常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下(块级元素),一行接一行,每一行从左至右(行内元素)。

内联元素不会独占一行,而每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。浮动元素不占任何正常文档流空间,而浮动元素的定位照样基于正常的文档流,当一个元素脱离正常文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

文本流

文本流,概括地说其实就是一系列字符,是文档的读取和输出顺序,也就是我们通常看到的由左到右、由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而position属性可以将元素从文本流脱离出来显示。

文档流与文本流的区别:

文档流是相对于盒子模型讲的
文本流是相对于文字段落讲的
元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在它身下布局。但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是没有拖出文本流。
但是绝对定位后,不仅元素盒子会拖出文档流,文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置,会直接在它后面布局,不会在环绕。简单来说就是float脱离了“文档流”,没有脱离“文本流”;position中的absolute和fixed全部脱离。

脱离文档流

元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

脱离文档流的方法:

MDN上列举了三个:

1.浮动float

p {
	background-color: #ccc;
}
.float {
	float: left;
	font-weight: bold;
	width: 200px;
	border: 2px dotted black;
	padding: 10px;
}
<div class="box">
    <div class="float">I am a floated box!</div>
    <p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
    <p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
</div>

最后运行的结果为:

可以看到下面的段落的背景颜色在下面运行,只是缩短了该段落的行框,以引起将内容环绕在浮动对象周围的效果。我们段落的框仍按照正常流程的规则显示。这就是为什么要在浮动项目周围留出空间,必须在该项目上添加边距,以便将线框推离它。

所以就验证了float脱离了“文档流”,没有脱离“文本流”。

2.绝对定位 position: absolute/fixed

p {
	border: 2px solid green;
}
.abspos {
	position: absolute;   //fixed运行结果与absolute结果一致
	background-color: green;
	color: #fff;
	top: 30px;
	right: 30px;
	width: 400px;
}
<div class="box">
    <p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.</p>
    <p class="abspos">Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
    <p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
</div>

最后的运行结果:

这个可以看到 使用position:absolute; 的元素被从文档流中删除,而且其占用的空间也被删除了。

3.根元素(html)

根据截图内容可以看到:根元素已不再流通,它是文档中所有内容的容器,并为文档建立了块格式上下文。

这里需要对比一下绝对定位和相对定位的区别:

将上述绝对定位例子中的abspos元素的定位属性position改为relative,查看结果:

可以看到原来元素的位置还保留着,只是该元素位置发生了改变。

浮动流

浮动流是一种半脱离标准流的排版方式, 是水平排版形式,它只能设置某个元素左对齐或者右对齐,它的属性 float ,取值 right/left/none。

注意点:浮动流没有居中对齐,也就是没有center这个取值。

在浮动流中是不区分行内元素/行内块级/块级元素,都可以设置宽高。

实现浮动的例子在脱离文档流第一个例子。

清楚浮动可以看这里~

定位流

属性position分类:

  • 相对定位 relative
  • 绝对定位  absolute
  • 固定定位 fixed
  • 静态定位  static

相对定位relatice

唯一一个不脱离文档流的属性值,始终在页面中占位置。

相对自身原位置的偏移(加位移向)需要配合使用。

特点:

  • 不影响元素本身特性
  • 不是元素脱离文档流(元素其实位置会被保留)
  • 没有定向偏移量时,对元素无影响(相对于自身偏移量)
  • 提高层级

绝对定位 absolute

  • 使元素完全脱离文档流
  • 使内联元素支持宽高
  • 块属性标签内容撑开宽度
  • 相对于父元素偏移量,逐层上找,直到document
  • 相对定位一般配合绝对定位使用
  • 提升层级

若无父级没有定位,则会逐层上找。

层级:在没有层级的情况下,谁在后面谁就在上面。

z-index(改变定位元素) 值越大,在最顶层

固定定位 fixed

与绝对定位一致,但相对于可视化区域偏移,且ie6及低版本不兼容。

绝对定位的东西与页面一同运动,但固定定位的只停留在窗口,不随滚动条移动。

 

参考链接:知乎问题解答

                 HTML普通流/文档流

                 MDN guides In Flow and Out of Flow

                 定位流和浮动定位

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读