关于对同一个盒子同时设置相对定位和浮动或者绝对定位和浮动的问题

      可能细心的朋友在查看某些网页的时候发现，某些盒子或是图片既设置了相对定位又设置了浮动，觉得很奇怪，其实呢，这个设置是非常的正常。

   比如，在布局页面的时候，我希望导航和轮播图一左一右的进行显示，就可以对导航设置左浮动float。轮播图右浮动。但是呢、如果导航里面有些小图标之类的东西要进行绝对定位absolute操作时，那么就可以对该导航设置相对定位relative了，相当于小图标的已定位的祖先元素就是这个导航了，关键相对定位不会改变浮动属性，用起来也是非常方便的。

  

    另外就是浮动float和绝对定位absolute一起设置了，这个可不可以呢？答案是不可以的，因为对同一个盒子设置绝对定位和浮动时，绝对定位会使浮动属性失效，这时就可能产生各种奇葩bug了，所以当一个盒子已经进行了浮动，就不要再对其进行绝对定位了，选择的时候一定要注意。

  总结下：

   div｛float :left;position:relative｝这样是可以的

   div｛float :left;position:absolute｝不允许，绝对定位会使浮动失效

  

    再来一个去哪儿前端面试的题目：

    div宽度为100px，边框为1px，div1、div2为兄弟元素，要求分别画出以下三种情况中二者的在页面中的表现
a) .div1{position:absolute;float:left} .div2{position:absolute;float:right}
b) .div1{postition:relative;float:left} .div2{position:relative;float:right}
c) .div1{position:absolute;float:right} .div2{position:relative;float:left}

     效果图如下：