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>

__EOF__

本文作者：是小李子哈
本文链接：https://www.cnblogs.com/lihongyun/p/16192715.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！