Clearfix 不适用于 <ol> 中的 float: left 和 float: right答案

【问题标题】：Clearfix not working with float: left and float: right in <ol>Clearfix 不适用于 <ol> 中的 float: left 和 float: right
【发布时间】：2014-06-18 11:43:16
【问题描述】：

我现在正在设计博客的 cmets 部分。我的标记是每个评论的有序列表项。在里面我有一个向左浮动的标题，一些跨度标签在标题中向右浮动。我试图清除标题（例如，此列表中的每个 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.

【问题讨论】：

标签： html css css-float clearfix

【解决方案1】：

我认为是 clearfix 导致了你的问题，我在这里玩过

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

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

【讨论】：

差不多。但是，如果标题高于一行，您的解决方案将不起作用。到目前为止，谢谢！
更新了垂直对齐的笔以允许多行codepen.io/dave_agilepixel/pen/hEFrk

【解决方案2】：

在解决这个问题又睡了一晚后，我尝试了另一种方法，效果很好。基本上我正在使用list-style-type: none，一个clearfix-hack 并从CSS 计数器获取我的数字。

The (updated) full solution(The old solution)：

ol {
    margin: 0 0 2em 2em;
    list-style-type: none;
    counter-reset: comment;
}

ol li article header h4::before {
    counter-increment: comment;
    content: counter(comment) ".\00A0";
    display: block;
    width: 10em;
    text-align: right;
    position: absolute;
    left: -10em;
}

header {
    position: relative;
}

h4 {
    display: inline;
}

span {
    float: right;
}

.clearfix::after 
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

非常感谢 Dave 和 Notulysses！

（如果有人碰巧知道，为什么列表和 clearfix-hacks 存在问题，我不介意，如果她/他可以向我解释。）

【讨论】：