Где применять класс clearfix

Question

У меня проблема с последним абзацем, который, по-видимому, не очищается и не скользит в середину h1 и nav. Но когда я положил div с ясным: оба свойства перед абзацем, похоже, работают.

Медведь с моим fiddle, пожалуйста.

• Я использовал фиолетовый фон, чтобы представить технику замены изображения, которую я узнал из неттоков.
• Часть clearfix - это класс с именем «группа», CSS находится внизу.
• Кроме того, если я удаляю display:block; с h1 > a, развод разбивается, поэтому вопрос о том, какие элементы следует плавать, и где следует применять clearfix.

Answer 1

Проблема, которую вы видите, возникает из-за того, что очищающий элемент находится в неправильном месте.

Рассмотрим ваши CSS:

h1 { 
    margin: 0; 
    float: left; 
    background: red; 
    text-indent: -9999px; 
    border: 1px dashed cyan; 
} 
nav { 
    height: 44px; 
    margin: 0; 
    float: right; 
    background: black; 
    border: 1px dashed cyan; 
} 
.group:after { 
    content:"x"; 
    display:table; 
    clear:both; 
    background-color: cyan; 
} 

Вы h1 плавал налево и nav поплыл вправо, а затем у вас есть p блок с текстом (не плавала).

Содержимое, охватывающее два плавающих элемента, как ожидается, не добавит правила clear:both к p, как указано ранее.

Очищающий элемент должен появиться в DOM после элемента nav.

В этом примере применяется .group к nav, который генерирует контент, который появляется после ul блока, который является дочерним nav блока.

Проблема становится более очевидной: вы устанавливаете высоту nav в auto, и вы добавляете границы и цвета, чтобы показывать края различных блоков.

См демо по адресу: http://jsfiddle.net/audetwebdesign/9nGQy/

Проблему можно рассматривать следующим образом:

Я добавил x, чтобы отметить место в вашем сгенерированного контента для клирингового элемента, который появляется в блок nav.

Answer 2

Try:

p{ 
    clear:both; 
} 

Он должен работать для вас в зависимости, что результат вы после этого.