Css 奇怪的列表和浮动包装

标记：

<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%;
   position:absolute;
}

---

希望这有帮助。

将

section>ol

更改为

section ol

，以确保块应用于两个

ol

元素。

这将浮动nav列表，这与我所希望的大不相同。如果我将其设置为position:absolute，则它将在父元素内从流中取出。

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