HTML文档流、文本流和脱离文档流_定位脱离文档流的情况-CSDN博客

本文链接：https://blog.csdn.net/wangfeijiu/article/details/106563074

文档流（普通流）

在文档流中，HTML 元素会按照其在 HTML文档中的位置顺序来排布,将窗体自上而下分成一行一行,并在每行中左至右的挨次排放行内元素，遇到阻碍或者宽度不够自动换行。而块状元素将独占一行。块级元素和行内元素.

文本流

文本流是相对于文字段落讲的。可视为一串字符由左到右、由上而下的读取和输出形式

脱离文档流

脱离文档流只有三种情况

浮动（float）
绝对定位（position:absolute)
固定定位(position:fixed）

脱离文档流并不是将它从dom树中移除，只是其他盒子定位的时候，当作没看到它。其后面的元素会直接无视这个脱离了文档流的元素，直接正常补位上去。而该元素自身也不会再受到文档流布局的束缚。

浮动

元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它没有浮动前占据的区域，直接在它身下布局。但文字却会认同浮动元素浮动前所占据的区域，围绕它布局，也就是没有脱离文本流。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			.demo1 {
				width: 200px;
				height: 200px;
				border: 5px solid red;
				/* float: left; */
			}

			.demo2 {
				width: 200px;
				height: 100px;
				border: 5px solid green;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="demo1">这是demo1的文本</div>
		<div class="demo2">这是demo2的文本</div>
		<div class="demo2">talk is cheap show your </div>
	</body>
</html>

📌注释了浮动的
在这里插入图片描述
（图一）

📌开启了浮动的
在这里插入图片描述
（图二）

📌开启了浮动的并设置demo2 width:250px

在这里插入图片描述
（图三）

❓图2文字为何会重叠？

当你div往上推的时候，当div上边框碰到了浮动块的下边框时候，文本流就不会继续上移了

❓图3下面文字为何上移一行？

溢出部分（不与浮动块重叠）的div空间，有足够空间存放文本，就会文本流读取，把原来在下方的文本流移动上去了一行

绝对定位和固定定位

绝对定位和固定定位，不仅会把元素盒子拖出文档流，盒子内的文字也会拖出文本流。可以使用 z-index 来让底部的元素到上面来，类似于一个图层的概念。效果差不多，固定定位只是相对于浏览器窗口进行定位，也就是这个div固定在浏览器窗口上了，不论我们怎么拖动滚动条都无法改变它在浏览器窗口的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            width: 200px;
            height: 200px;
            border: 5px solid red;
            position: absolute;
			left: 0px;
			top: 0px;
        }
        .demo2{
            width: 200px;
            height: 100px;
            border: 5px solid green;
        }
    </style>
</head>
<body>
    <div class="demo1">这是demo1的文本</div>
    <div class="demo2">这是demo2的文本</div>
</body>
</html>