html5-css:关于float,position的定位问题，文档流的解析

最新推荐文章于 2022-09-01 10:14:15 发布

狂暴虐杀者

最新推荐文章于 2022-09-01 10:14:15 发布

阅读量335

点赞数

分类专栏： html5-css

本文链接：https://blog.csdn.net/u013153983/article/details/58598764

版权

html5-css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自己总结，全作参考，请以权威文档为准；

以下是一段代码，该代码中的四个DIV并没有做任何 float 或 position 的 css 属性设定；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 250px;
				padding-top: 50px;
				padding-bottom: 50px;
				text-align: center;
			}
			div:nth-child(1){
				margin-left: 0px;
				background-color: cyan;
			}
			div:nth-child(2){
				margin-left: 200px;
				background-color: chartreuse;
			}
			div:nth-child(3){
				margin-left: 400px;
				background-color: crimson;
			}
			div:nth-child(4){
				margin-left: 600px;
				background-color: orange;
			}
		</style>
	</head>
	
	<body>
		<div>this is an ordinary div</div>
		<div>this is an ordinary div</div>
		<div>this is an ordinary div</div>
		<div>this is an ordinary div</div>
	</body>
</html>

显示结果如下：

接下来，对红色方块设定float属性：float=right;

将上例style替换为：

<style type="text/css">
			div{
				width: 250px;
				padding-top: 50px;
				padding-bottom: 50px;
				text-align: center;
			}
			div:nth-child(1){
				margin-left: 0px;
				background-color: cyan;
			}
			div:nth-child(2){
				margin-left: 200px;
				background-color: chartreuse;
			}
			div:nth-child(3){
				margin-left: 400px;
				float: right;
				background-color: crimson;
			}
			div:nth-child(4){
				margin-left: 600px;
				background-color: orange;
			}
		</style>

显示结果如下：

可见红色方块在向右浮动，且是基于其原本的位置向右浮动。红色方块的div之后的div块（这里的测试中的橙色块）的定位无视它前面的浮动块。但其中的文本却受到红色浮动块的margin-top属性的影响，当我们去掉红色块的margin-top属性后，显示如下：

可见去掉红色块的margin-top的属性后，它后面的橙色块中的文本恢复正常。

狂暴虐杀者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5-css:关于float,position的定位问题，文档流的解析

自己总结，全作参考，请以权威文档为准；以下是一段代码，该代码中的四个DIV并没有做任何 float 或 position 的 css 属性设定； div{ width: 250px; padding-top: 50px; padding-bottom: 50px; text-align: center; }
复制链接

扫一扫