html - Clearfix 不适用于 float : left and float: right in <ol>

Question

我现在正在设计博客的评论部分。我的标记是每个评论的有序列表项。在里面，我有一个标题向左浮动，一些 span-tag 在标题中向右浮动。我尝试清除 header (例如，此列表中的每个 clearfix-hack:http://red-team-design.com/clearing-floats-nowadays/)，但没有任何效果使数字保持在应有的位置。

我做了一个fiddle玩了一下，但无法让它工作。

html:

<ol>
    <li>
        <article>
            <header class="clearfix">
                <h4>Heading</h4>
                <span>Some link</span>
            </header>
            <p>Some content.</p>
        </article>
    </li>
</ol>

CSS:

ol, li, article, header, h4, span {
    font-size: 14px;
    line-height: 28px;
    margin: 0;
    padding: 0;
}


ol {
    margin: 0 0 28px 28px;
}

h4 {
    float: left;
}

span {
    float: right;
}

如果没有解决这个问题的好方法，我愿意接受有关标记更改的建议。

编辑:这就是我想要的样子:

1. Heading             Some link|
   Some content comes her. Text,|
   text, text, text, text, text,|
   text and more text.          |
                                |
2. A much longer heading        |
                       Some link|
   Some content and so on...    |
                                |
                                |
3. Even headings can be very,   |
   very long           Some link|
   Content goes here.           |
                                ^Right border of containing element.

Answer 1

我认为是 clearfix 导致了你的问题，我在这里试了一下

http://codepen.io/dave_agilepixel/pen/hEFrk

仅通过 float 跨度，删除清除修复并使用内联 block 使 h4 和跨度保持在同一行，我认为这可行并解决了您的问题。