Question

为什么加上float:left后div标签会跑到中间去 我加了一个 position: absolute;就好了 但我不理解

我已经解决了 但我不明白这个原理 谁能给我解释解释啊！代码如下：
<div style="margin:auto;width:980px;height;500px;" >
<div style="float:left;width:180px;height:500px;"></div>
<div style="float:right;"width:700px;height:500px;></div>
</div>
我是在做分页的时候把分页样式放到首页样式里才出现这种状况的 但如果首页样式拿出来就没有这种现象 谁能给我解释解释 其实我不太理解 position: absolute;属性

Answer 1

我没太懂lz说哪个加了float:left会居中……
position: absolute，是相对上一级的position来说的
比如：
<div style="position: relative; background-color:red;">bla
<div style="position: absolute; top:0;left:0;background-color:yellow"> bla</div>
bla
</div>
黄色bla会定位到外面div原点左上角的0,0。并且黄色bla不占位置，就如同浮动层，以上一个定义了position的div的原点为原点，可以绝对的进行定位。如果没有上一层，就以整个页面的左上方为原点。
建议阅读学习position属性。

Answer 2

float:left;是在外层div里面居左的，position: absolute;是对位置的一个绝对定位，通常和left:50px;top:50px; bottom:50px;right:50px;这些属性联系在一起，实现绝对定位。

追问

我的第一个代码不就代表了外层的那个div了吗 相对于左栏来说

追答

就你上面的代码，是宽度为980px的div在屏幕水平居中，而这个宽度为980px的div里面套了两个小div，宽度为180px的div只是在外层div内部靠左。absolute是实现绝对定位的，两者没有关系。

Answer 3

我也遇到了这个问题，加上float：left；标签就跑中间了，加上position:absolute;就又好了，但是ie6的浏览器不兼容，你当时解决兼容性了吗，知道为什么会这样吗，求指教

Answer 4

Vue实践-CSS样式position/display/float属性对比使用