怎么理解css文档流/元素脱离文档流后有什么特点

最新推荐文章于 2022-10-17 16:14:42 发布

小朱爱开发

最新推荐文章于 2022-10-17 16:14:42 发布

阅读量1.3k

点赞数 4

分类专栏：学习笔记文章标签： css 定位 html

本文链接：https://blog.csdn.net/weixin_44312227/article/details/115408702

版权

学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文档流处在文档的最底层，它规定了一个页面的位置和元素布局等规则。
我们所创建的元素都处在文档流中，文档流所指定的规则比如块级元素独占一行，内联元素不会独占一行，内联元素不能设置高宽，父元素的高度由子元素撑开等。文档流之所以称为流，是它的布局像流一样从上到下在从左到右。
而元素脱离文档流之后，该元素便不再遵循文档流的规则，比如块级元素不再独占一行，内联元素脱离文档流之后可以设置高宽，脱离的元素不能撑开父元素，不再在文档流中占有位置等。
而脱离文档流的设置有两种：float，position：absolute

1、float
（我的理解是通过设置float来脱离文档流，脱离后的元素会遵循文档流之外的另一套规则，暂且称为浮动规则）。
规则如下：
①、产生字围效果，元素不会盖住文字，文字会绕着元素布局。
②、元素层级提高，会盖住非浮动的元素。
③、父元素的垂直外边距不会和子元素重叠。
④、浮动元素不会超过超过上面的非浮动元素，会排列在非浮动块元素的下一行。
⑤、元素浮动后会尽量向页面的左上或右上浮动，直到遇到父元素边框或其它浮动元素（浮动的元素不会脱离父元素，浮动还是相对于父元素浮动）。
⑥、浮动的元素不会超过它上边的兄弟元素，最多一边齐。
⑦、文档流中子元素的宽度默认为父元素的100%，脱离文档流之后，块元素的高宽度都只能由内容撑开，而且浮动的子元素无法撑开父元素（除非父元素也是浮动元素）。
⑧、内联元素浮动后会变成块级元素。

2、position:absolute
（我的理解是通过设置绝对定位来脱离文档流，脱离后的元素会遵循文档流之外的另一套规则，暂且称为绝对定位规则）。
规则如下：
①、绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的，没有这种祖先元素，则相对于浏览器窗口（以左上角为坐标（0，0））
②、定位元素会提高一个层级。
③、内联元素变块级元素，高宽都只能由内容撑开。
④、当一个文档流中的元素前的一个元素开启了绝对定位，则这个文档流中的元素会向上移动，被前元素覆盖。（其实跟浮动规则差不多），如果没有这样的情况，则开启了绝对定位的元素如果不设置偏移量，位置不会发生变化。

浮动规则≠绝对定位规则，两者不相通
这句话的意思是一个浮动元素和一个定位元素会重叠，且绝对定位元素的层级高于浮动元素的层级（按照浮动规则，浮动的兄弟元素是不会相互覆盖的）。
举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#box1{
			width: 400px;
			height: 400px;
			/* position: absolute; */
			float: left;
			background-color: red;
		}
		#box2{
			width: 100px;
		    height: 100px;
			background: green;
			float:left;
			/* position: absolute; */
	</style>
	<body>
		<div id="box1">	
		</div>
		<div id="box2">
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#box1{
			width: 400px;
			height: 400px;
			 float: left;//两个div一个浮动一个开启绝对定位
			background-color: red;
		}
		#box2{
			width: 100px;
		    height: 100px;
			background: green;
			/* float:left; */
			position: absolute;
	</style>
	<body>
		<div id="box1">	
		</div>
		<div id="box2">
		</div>
	</body>
</html>

在这里插入图片描述
（当两个元素都开启绝对定位且不设置偏移量时，两个元素也会像上面这个图一样相互覆盖）

小朱爱开发

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
怎么理解css文档流/元素脱离文档流后有什么特点

文档流处在文档的最底层，它规定了一个页面的位置和元素布局等规则。我们所创建的元素都处在文档流中，文档流所指定的规则比如块级元素独占一行，内联元素不会独占一行，内联元素不能设置高宽，父元素的高度由子元素撑开等。文档流之所以称为流，是它的布局像流一样从上到下在从左到右。而元素脱离文档流之后，该元素便不再遵循文档流的规则，比如块级元素不再独占一行，内联元素脱离文档流之后可以设置高宽，脱离的元素不能撑开父元素，不再在文档流中占有位置等。而脱离文档流的设置有两种：float，position：absolute
复制链接

扫一扫