html - Clearfix 将内容下推

Question

我有一个有序列表，li 项中的元素是 float 的，所以我将 clearfix 代码应用于 li，但由于某种原因 li 元素被下推。

JS Fiddle 在这里:http://jsfiddle.net/48psdoeu/2/

.true-false ol {} .true-false ol > li:before,
.true-false ol > li:after {
  content: " ";
  display: table;
}
.true-false ol > li:after {
  clear: both;
}
.true-false ol .question {
  width: 70%;
  padding-top: 0;
  float: left;
}
.true-false ol .answer {
  width: 10%;
  float: left;
}
p {
  padding: 0;
  margin: 0;
}

<div class="true-false">
  <ol type="i">
    <li>
      <div class="question">
        <p>Always add water to chemicals as fast as possible.</p>
      </div>
      <div class="answer">test</div>
    </li>
    <li>
      <div class="question">
        <p>Always keep chemicals in their original container.</p>
      </div>
      <div class="answer">test</div>
    </li>

  </ol>
</div>

Answer 1

display: table 声明混淆了每个 li 元素中文本的基线，导致文本被下推。

display: table 在 clearfix 中并不是真正需要的。事实上，它实际上根本没有帮助使 clearfix 工作。 It's there for a different reason.您可以将其替换为 display: block，它会起作用。

但是你真的根本不需要这里的 clearfix。您可以通过对每个(连续的)li 应用清除来正常清除 float 。我可以想象你唯一真正需要 clearfix 的地方是 .true-false 或 .true-false ol，但这取决于你的布局。不过我可以肯定的是，您绝对不需要在 li 元素上使用它。

.true-false ol > li {
  clear: both;
}
.true-false ol .question {
  width: 70%;
  padding-top: 0;
  float: left;
}
.true-false ol .answer {
  width: 10%;
  float: left;
}
p {
  padding: 0;
  margin: 0;
}

<div class="true-false">
  <ol type="i">
    <li>
      <div class="question">
        <p>Always add water to chemicals as fast as possible.</p>
      </div>
      <div class="answer">test</div>
    </li>
    <li>
      <div class="question">
        <p>Always keep chemicals in their original container.</p>
      </div>
      <div class="answer">test</div>
    </li>

  </ol>
</div>