欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

float与position同时使用

程序员文章站 2022-04-25 19:55:22
...

float浮动与position同时使用并不会冲突，前者是使元素脱离标准流，浮动在文档流上；而后者是使元素相对自身的移动定位，虽浮动但占据原有位置。当两者同时使用时，不会发生冲突，反而使元素同时具有两者特性，即既可以相对自身移动定位，又可以浮动不占位置。

<style>
	    * {
	    	margin: 0;
	    	padding: 0;
	    }
		.nav {
			margin: 100px;
			height: 200px;
			width: 300px;
			border: 1px solid red;
		}
		.banner {
			float: left;
			height: 50px;
			width: 50px;
			position: relative;
			background-color: red;
		}
		.header {
			float: left;
			height: 50px;
			width: 50px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="nav">
		<div class="banner"></div>
		<div class="header"></div>
	</div>
</body>

 

如代码所示，此时的效果为：

float与position同时使用

 

当设置边偏移时，效果如下：

.banner {
			float: left;
			height: 50px;
			width: 50px;
			position: relative;
			left: 100px;
			background-color: red;
		}

float与position同时使用

？？？疑问，虽然边偏移有效，但为什么黄色的盒子没有因为float：left到最左边呢？？

--------------------------------------------------------------------------------------------

因为relative是要保留原本的位置的啊！！！

 

 

为了搞清楚原因，做以下测试：

.header {
			float: right;
			height: 50px;
			width: 50px;
			background-color: yellow;
		}

把黄色的float改成right，效果如下，其确实浮到了最右边：

float与position同时使用

再测试，这次修改结构，把黄色的div改到红色的div前面(或者删掉黄色盒子的浮动）(再或者给其加一个定位absolute），效果如下，黄色的也浮到了最左边：

<div class="nav">
		<div class="header"></div>
		<div class="banner"></div>
	</div>

float与position同时使用

 

 

 

上一篇： HTML的(pre>标签中嵌套HTML标签时被解析的解决方案

下一篇： JavaScript入门学习：特点、数据类型分类、常见运算符、三大流程顺序及三种循环讲解

推荐阅读