示例代码：
<p style="float:left; width:300px;margin-right:30px;">
<img src="xxx.jpg" alt="测试float与ol" />
</p> <ol> <li>首先打开动作面板点右边的下拉菜单,选择载入动作</li> <li>选择要载入的动作文件</li> <li>载入后我们就可以在动作面板下面找到刚才载入的动作。</li> </ol>
此时会看到下图中的效果：
ol里的内容会出现在p的右边，但整个OL块的位置其实是图中一样，left是顶着页面左边而非它前面的p元素的右边，此时p的margin对ol也会无效，所以可以看到，ol本身的序号都被挡住了。
这个时候给ol也加上float:left就可以正常了。但大部分时候这个float是本来不应该加的，而且会导致ol后面的元素定位错误。
这个问题看起来很无厘头，而且所有浏览器都这样，可以排除兼容性问题。
但解决这个问题也非常简单：给ol加上overflow，可以是auto或者hidden，但不能是visible(默认)。为了兼容IE，还得加上zoom:1.
完整CSS代码：
ul,ol{overflow:auto;zoom:1;}
此时在所有浏览器都正常了，ol块的位置如图:
问题解决了，最后吐槽几句：解决这个问题的过程，是因为我用英文方式搜索到的国外网站上的结果，我也试过搜索“ul前的float元素”类似的，但都找不到想要的答案。对此我表示很无奈。
本文链接: http://www.jo2.org/204.html.转载请保留.