float浮動與position同時使用并不會沖突，前者是使元素脫離標(biāo)準(zhǔn)流，浮動在文檔流上；而后者是使元素相對自身的移動定位，雖浮動但占據(jù)原有位置。當(dāng)兩者同時使用時，不會發(fā)生沖突，反而使元素同時具有兩者特性，即既可以相對自身移動定位，又可以浮動不占位置。
<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>
如代碼所示，此時的效果為：
20180901162516580.png
當(dāng)設(shè)置邊偏移時，效果如下：
.banner {
float: left;
height: 50px;
width: 50px;
position: relative;
left: 100px;
background-color: red;
}
20180901165556404.png
？？？疑問，雖然邊偏移有效，但為什么黃色的盒子沒有因為float：left到最左邊呢？？
因為relative是要保留原本的位置的啊?。?！
為了搞清楚原因，做以下測試：
.header {
float: right;
height: 50px;
width: 50px;
background-color: yellow;
}
把黃色的float改成right，效果如下，其確實浮到了最右邊：
2018090117014172.png
再測試，這次修改結(jié)構(gòu)，把黃色的div改到紅色的div前面(或者刪掉黃色盒子的浮動）(再或者給其加一個定位absolute），效果如下，黃色的也浮到了最左邊：
<div class="header"></div>
<div class="banner"></div>
</div>
20180901170436970.png
