float与position同时使用
2018-10-21 本文已影响0人
祝我好运zz
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>
如代码所示，此时的效果为：
20180901162516580.png
当设置边偏移时，效果如下：
.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
再测试，这次修改结构，把黄色的div改到红色的div前面(或者删掉黄色盒子的浮动）(再或者给其加一个定位absolute），效果如下，黄色的也浮到了最左边：
<div class="header"></div>
<div class="banner"></div>
</div>
20180901170436970.png
