float与position同时使用_float position-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_27346075/article/details/82288242

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>

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

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

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

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

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

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

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

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

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

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

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