Clearfix 将内容向下推

Question

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

这里是 JS 小提琴：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 应用清除来正常清除浮动。我能想象到你真正需要 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>