示例代码：

<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块的位置如图: