CSS浮动（二）

最新推荐文章于 2024-04-08 14:59:49 发布

有点帅气在身上

最新推荐文章于 2024-04-08 14:59:49 发布

阅读量1.1k

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_50777322/article/details/125712957

版权

CSS浮动过程延申

第二阶段CSS学习之浮动过程延申

文章目录

CSS浮动过程延申
总结

1.浮动的过程一

浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来，
当浮动框脱离文档流后，将不会对文档流中的块框进行影响。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#all{
		width: 300px;
		height:300px;
		border: 1px solid red;
		margin: 0 auto;
	}
	#main1{
		width: 50px;
		height:50px;
		background-color: green;
		float: right;
	}
	#main2{
		width: 50px;
		height:50px;
		background-color: red;
	}
	#main3{
		width: 50px;
		height:50px;
		background-color: blue;
	}
	</style>
</head>
<body>
<div id="all">
	<div id="main1">1</div>
	<div id="main2">2</div>
	<div id="main3">3</div>
	</div>
</body>
</html>

在下图中显示，当把绿色框向右浮动时，它将脱离文档流并向右移动，当它的右边缘触碰到包含框的右边缘时停下，红色框和蓝色框将向上移动：
（浮动前）

（浮动后）
在这里插入图片描述

2.浮动的过程二

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#all{
		width: 300px;
		height:300px;
		border: 1px solid red;
		margin: 0 auto;
	}
	#main1{
		width: 50px;
		height:50px;
		background-color: green;
		float: left;
	}
	#main2{
		width: 50px;
		height:50px;
		background-color: red;
	}
	#main3{
		width: 50px;
		height:50px;
		background-color: blue;
	}
	</style>
</head>
<body>
<div id="all">
	<div id="main1">1</div>
	<div id="main2">2</div>
	<div id="main3">3</div>
	</div>
</body>
</html>

当框绿色框向左浮动时，它将会脱离文档流然后进行向左移动，当它的左边缘触碰到包含框的左边缘时停下。
（浮动效果）
在这里插入图片描述
红色框在途中没显示的原因是因为绿色框向左浮动后不再处于文档流中，因此绿色框不占据空间，当红色框和蓝色框向上移动后，绿色框就挡住了红色框，使红色框从视图中消失。

3.浮动的过程三

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#all{
		width: 300px;
		height:300px;
		border: 1px solid red;
		margin: 0 auto;
	}
	#main1{
		width: 50px;
		height:50px;
		background-color: green;
		float: left;
	}
	#main2{
		width: 50px;
		height:50px;
		background-color: red;
		float: left;
	}
	#main3{
		width: 50px;
		height:50px;
		background-color: blue;
		float: left;
	}
	</style>
</head>
<body>
<div id="all">
	<div id="main1">1</div>
	<div id="main2">2</div>
	<div id="main3">3</div>
	</div>
</body>
</html>

将三个块框进行向左浮动后，那么绿色框向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
（浮动后）
在这里插入图片描述

4.浮动的过程四

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#all{
		width: 140px;
		height:300px;
		border: 1px solid red;
		margin: 0 auto;
	}
	#main1{
		width: 50px;
		height:50px;
		background-color: green;
		float: left;
	}
	#main2{
		width: 50px;
		height:50px;
		background-color: red;
		float: left;
	}
	#main3{
		width: 50px;
		height:50px;
		background-color: blue;
		float: left;
	}
	</style>
</head>
<body>
<div id="all">
	<div id="main1">1</div>
	<div id="main2">2</div>
	<div id="main3">3</div>
	</div>
</body>
</html>

如果我们定义的包含框宽度过窄，无法容纳三个浮动元素进行水平排列，当不足以容纳下一个浮动块时，该浮动块就会往下移动，直到有足够的空间进行浮动。
（浮动后）
在这里插入图片描述

5.浮动的过程五

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#all{
		width: 140px;
		height:300px;
		border: 1px solid red;
		margin: 0 auto;
	}
	#main1{
		width: 50px;
		height:80px;
		background-color: green;
		float: left;
	}
	#main2{
		width: 50px;
		height:50px;
		background-color: red;
		float: left;
	}
	#main3{
		width: 50px;
		height:50px;
		background-color: blue;
		float: left;
	}
	</style>
</head>
<body>
<div id="all">
	<div id="main1">1</div>
	<div id="main2">2</div>
	<div id="main3">3</div>
	</div>
</body>
</html>