Clearfix向下推内容

Question

我有一个Ordered列表，li项中的元素是浮动的，所以我对li应用了clearfix代码，但由于某种原因，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元素中文本的基线相混淆，导致文本被向下推。

在clearfix中并不真正需要display: table。事实上，它实际上根本没有帮助clearfix工作。它存在的原因不同。您可以将其替换为display: block，它将起作用。

但你真的根本不需要清理。您可以通过对每个（连续的）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>