Clearfix pushing the contents down

Question

I've got an Ordered list and the elements inside the li item are floating, so I applied the clearfix code to the li, but for some reason the contents on the li item is being pushed down.

JS Fiddle here: 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

The display: table declaration messes with the baseline of the text in each li element, resulting in the text being pushed down.

display: table isn't really needed in a clearfix. In fact, it doesn't actually contribute to making the clearfix work at all. It's there for a different reason. You can replace it with display: block instead, and it'll work.

But you really don't need a clearfix here at all. You can just clear the floats normally by applying clearance to each (successive) li. The only place I can imagine you'd really need a clearfix is on .true-false or .true-false ol, but that depends on your layout. What I am certain though is that you absolutely don't need it on the li elements.

.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>