浮动的原理例子_浮动的形成过程-CSDN博客

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/118927906

当元素的值开始浮动时，就脱离了正常的文档流，在页面的布局中就不会遵守原来的布局。

浮动通过flaot实现。

比如：三个布局时。

正常布局：

现在是三个竖排

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height: 200px;
			background-color: #7FFFD4;
		}
		.two{
			background-color: #B8860B;
		}
		.three{
			background-color: brown;
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

浮动后：

现在是三个横排

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height: 200px;
			background-color: #7FFFD4;
			float:left;
		}
		.two{
			background-color: #B8860B;
		}
		.three{
			background-color: brown;
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

现在来说原理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height: 200px;
			background-color: #7FFFD4;
		}
		.one{
			float:left;
		}
		.two{
			background-color: #B8860B;
		}
		.three{
			background-color: brown;
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

当第一个div进行了浮动，第二个div和第三个div不浮动时，页面布局会发生相应的变化。

第一个div进行浮动后，第一个div的正常文档流位置就空了出来，第二个div就会跑上去占据第一个div的位置。这样，如果第二个div和第一个div的大小一样，在肉眼上就是看不见第二个div的位置的，可以把第二个div的宽高设置的比第一个div的宽高大来查看效果。

这样操作后，第二个div的正常文档流的位置也空了出来，然后第三个div会占据第二个div的位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height: 200px;
			background-color: #7FFFD4;
		}
		.one{
			float:left;
		}
		.two{
			background-color: #B8860B;
			width:300px;
			height:300px;
		}
		.three{
			background-color: brown;
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

当第一个元素和第二个元素同时进行了左浮动，页面布局的变化如下。

当第一个div和第二个div发生了左浮动后，第一个div第二个div靠近页面的左面，第二个div紧紧跟在第一个div的身后，第三个div本来应该跟着在第二个div的下面，但是因为第二个div浮动后空出了正常文档流的第一个位置，第三个div后就跑到了正常文档流的第一个位置，因为第一个div和第二个div的位置在其他文档流。也可以设置第三个div的宽高更大，来查看第三个div的位置，同时再设置一个div查看位置，观察效果.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:300px;
			height: 300px;
			background-color: #7FFFD4;
		}
		.one{
			float:left;
		}
		.two{
			background-color: #B8860B;
			width:300px;
			height:300px;
			float:left;
		}
		.three{
			background-color: brown;
			width:400px;
			height:400px;
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
		<div class="four"></div>
	</body>
</html>

当123个div同时发生了浮动，就第一个div,第二个div,第三个div就变成了一排。

而第四个元素就盯着正常文档流空出的那一行占据了那里。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:300px;
			height: 300px;
			background-color: #7FFFD4;
		}
		.one{
			float:left;
		}
		.two{
			background-color: #B8860B;
			width:300px;
			height:300px;
			float:left;
		}
		.three{
			background-color: brown;
			width:400px;
			height:400px;
			float: left;
		}
		.four{
			width:500px;
			height:500px;
			background-color: crimson;
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
		<div class="four"></div>
	</body>
</html>

第一个元素不浮动，第二三个元素浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height:200px;
		}
		.one{
			background-color: aqua;
		}
		.two{
			background-color: brown;
		}
		.three{
			background-color: blueviolet;
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

当第一个元素不浮动，第二个元素浮动时，第三个元素不浮动时。第三个元素隐藏在了第二个元素下面。可以把第三个元素宽高增大来看（看图三）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height:200px;
		}
		.one{
			background-color: aqua;
		}
		.two{
			background-color: brown;
			float: left;
		}
		.three{
			background-color: blueviolet;
		
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height:200px;
		}
		.one{
			background-color: aqua;
		}
		.two{
			background-color: brown;
			float: left;
		}
		.three{
			background-color: blueviolet;
		    width:300px;
		    height:300px
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

当第一个div不浮动，第二个第三个div都同时浮动时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height:200px;
		}
		.one{
			background-color: aqua;
		}
		.two{
			background-color: brown;
			float: left;
		}
		.three{
			background-color: blueviolet;
		    float:left;
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

记录下特殊现象

当div都浮动时，第二个div宽设为100%。但是没有按照一般情况进行排列。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height:200px;
		}
		.one{
			background-color: aqua;
			width:400px;
			height:200px;
			float:left;
		}
		.two{
			background-color: brown;
			float: left;
			width:100%; 
		}
		.three{
			background-color: blueviolet;
		    float:left;
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height:200px;
		}
		.one{
			background-color: aqua;
			width:400px;
			height:200px;
			float:left;
		}
		.two{
			background-color: brown;
			float: right;
			width:400px; 
		}
		.three{
			background-color: blueviolet;
		    float:left;
		}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			font-size: 20px;
			color: white;
		}
		.A{
			width:400px;
			height:500px;
			float: left;
			background-color: green;
		}
		.B{
			width: 400px;
			height: 400px;
		    float: left;
			background-color: blueviolet;
		}
		.C{
			width: 400px;
			height:300px;
			float:left;
			background-color: orangered;
		}
		</style>
	</head>
	<body>
		<div class="A">1</div>
		<div class="B">2</div>
		<div class="C">3</div>
	</body>
</html>

结论如下，

其他的还没想起来，等想起再说