Clearfix, нажимая содержимое вниз

Question

У меня есть упорядоченный список, а элементы внутри элемента li являются плавающими, поэтому я применил код 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. Единственное место, где я могу себе представить, что вам действительно нужно 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>