css - 列表和浮点数的奇怪包装

Question

http://jsfiddle.net/cqEw2/

标记：

<section>
    <h1>Title of this section</h1>

    <ol>
        <li>Thing thing thing thing thing thing thing thing</li>
        <li>Thing Thing Thing Thing THING THING THING</li>
    </ol>

    <nav>
        <ol>
            <li>Place1</li>
            <li>PlaceThatIsSecond</li>
            <li>Place3</li>
            <li>Place4</li>
            <li>Place5</li>
        </ol>
    </nav>
</section>

款式：

section > ol {
        display: block;
        float: right;
        clear: both;
        max-width: 80%;
}

section > nav {
    max-width: 20%;
}

当您缩小窗口时，长条目会导致列表的其余部分被推到主要内容下方，但左侧较早的列表条目仍位于上方。真的，整个事情应该立即下降，或者可能只是继续缩小。我没有遇到使用段落和块引用的类似侧边栏样式的这种行为。这是我的浏览器选择布局列表的方式所特有的，还是在标准中我遗漏了一些东西？

Answer 1

如果添加一个位置：绝对；它应该解决主要内容被推到下面的问题。

section > ol {
    display: block;
    float: right;
    clear: both;
    max-width: 80%;
}
section > nav {
   max-width: 20%;
   position:absolute;
}

希望这可以帮助。

Answer 2

更改section > ol以section ol确保将块应用于两个ol元素。