快速理解浮动对标准流的影响

最新推荐文章于 2022-05-15 13:15:45 发布

海面有风

最新推荐文章于 2022-05-15 13:15:45 发布

阅读量513

点赞数 7

分类专栏： css笔记文章标签： 1024程序员节 css html

本文链接：https://blog.csdn.net/weixin_44659458/article/details/109261246

版权

css笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、浮动对标准流的影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动和标准流</title>
		<style type="text/css">
			.container{
				width: 600px;
				height: 600px;
				border: 1px solid blue;
			}
			.item-1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.item-2{
				width: 200px;
				height: 200px;
				background-color: yellow;	
			}
			.item-3{
				width: 300px;
				height: 300px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item-1"></div>
			<div class="item-2"></div>
			<div class="item-3"></div>
		</div>
	</body>
</html>

正常效果
在这里插入图片描述

如果第一个盒子左浮动，其他盒子不浮动时

解释：因为第一个盒子在浮动层，第二和第三个盒子在标准层故按标准流的形式排列，因为第二个盒子是块级元素，独占一行。故第三个盒子另起一行。
如果第二个盒子左浮动，其他盒子不浮动时

解释：跟第一个盒子类似
如果第三个盒子左浮动，其他盒子不浮动时

解释：跟第一个盒子类似