CSS定位流和浮动流的区别

CSS中的存在的所有文档流的分类共有三种： 1. 普通流，2. 定位流，3. 浮动流。

CSS中说脱离文档流是指盒子从普通的布局排版中拿出来，其他盒子进行放置时，会当其不存在而进行布局。而脱离文档流分为两种

  • 完全脱离文档流：例如position:absolute，使用绝对定位的盒子，其他盒子无论是其本身还是里面的任何元素都会无视这个绝对定位的盒子进行布局。
  • 部分脱离文档流：即float盒子，使用float属性后，其他block盒子会无视float盒子进行布局，但是其他盒子内的inline元素和inline-block元素依旧会为这个浮动的盒子让出位置。
<html>
<head>
	<meta charset="utf-8">
	<title>practice</title>
	<style type="text/css">
		.dv2{
			width: 200px;
			height: 100px;
			border: 1px solid rgb(12, 203, 114);

		}
		.dv1{
			width: 200px;
			height: 50px;
			background: rgb(216, 52, 6);
			/*float: left;*/
			position: absolute;

		}
	</style>
</head>
<body>
	<div class="dv1"></div>
	<div class="dv2">
		<span>你查查唱日出</span>
		<i>穷哈哈唱日落</i>
	</div>
	<script type="text/javascript">
		
	</script>
</body>
</html>


<html>
<head>
	<meta charset="utf-8">
	<title>practice</title>
	<style type="text/css">
		.dv2{
			width: 200px;
			height: 100px;
			border: 1px solid rgb(12, 203, 114);

		}
		.dv1{
			width: 200px;
			height: 50px;
			background: rgb(216, 52, 6);
			float: left;
			/*position: absolute;*/

		}
	</style>
</head>
<body>
	<div class="dv1"></div>
	<div class="dv2">
		<span>你查查唱日出</span>
		<i>穷哈哈唱日落</i>
	</div>
	<script type="text/javascript">
		
	</script>
</body>
</html>

posted @ 2022-04-26 00:15  是小李子哈  阅读(37)  评论(0)  编辑  收藏  举报