Question

使用 CSS float: left和 float: right 缩放版面导致排版混乱的问题

我的基本布局是这样的
最外面是一个 相对定位的div，然后设置这个div的宽度为980px.
然后这个DIV内部的所有其他子DIV都是用 float: left 或者 float: right来定位的。。那么现在问题出来了，如果是正常的浏览一点问题也没有。可以当缩放整体版面的时候（ctrl+加号 或者 ctrl+减号）版面就出现了移位混乱的问题

Answer 1

clear:right; 这是解决你问题的答案，加在float:right中

不建议采用一楼的做法，绝对定位用于细节处理很便利，但并不常用于布局

仍有疑问，追问吧

追问

谢谢大家，问题已经找到原因了，主要的原因是因为当缩小整个版面的时候最外面用position定位的DIV宽度值要有一些容差，要是把宽度值打到正好的数组就会出现问题。我把宽度加大10px后缩放乱版面的问题就没有了！

Answer 2

用绝对定位吧 float 会让你的div跟他的父div失去一部分的父子关系 比如 子div如果用了float 如果子div的高度是不固定的 那么父div不会随着子div的增高而增高 建议都用定位来做

追问

修改成 position倒是可以。不过我感觉用float应该也可以做到缩放不影响版面布局。谢谢您的回答。非常感谢

Answer 3

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