CSS clearfix не работает

Question

Работает (http://jsfiddle.net/77RRA/1/), а это (http://jsfiddle.net/77RRA/) - нет.

Не является ли clearfix заменой строки <div style="clear: both;"></div>?

Answer 1

"Не clearfix должен заменить строку <div style="clear: both;"></div>?"

• Нет

Представьте у вас есть контейнер, содержащий несколько элементов. Если все эти элементы плавают, контейнер эффективно теряет информацию о высоте. Таким образом, маргинальные дни и фоновые стили отображаются неправильно. Clearfix решает эту проблему, добавляя псевдоэлементы до и после элемента контейнера +, устанавливая display: table;, чтобы растянуть его до полной высоты.

В вашем случае, вам придется добавить clear: both; на #child

Answer 2

Не clearfix должен заменить линии <div style="clear: both;"></div>

Да. Clearfix существует, чтобы избежать не семантического пустого тега. Однако для этого вам нужно поместить его на родительский элемент. (Example)

В вашем случае, однако, проблема не в том, что братья и сестры игнорируют перемещаемый элемент. Это не намерение clearfix, вы просто добавляете clear:right (или both, как и вы) на свой #child родной брат, чтобы восстановить нормальный поток документов.

your fixed Example

Answer 3

В вашем случае вы пытаетесь очистить плавающым элемент из себя (с псевдо-элемент, который принадлежит к себе).

Очистка должна быть на элементах, следующих за поплавковыми элементами.

Некоторые другие правила также могут достичь этого.

http://jsfiddle.net/77RRA/6/

#main { 
    background: lightgreen; 
    width: 100px; 
    height: 200px; 
} 

#one { 
    float: right; 
    display: block; 
} 

#child { 
    background: red; 
    width: 100%; 
    height: 20px; 
    display:inline-block 
} 

display:inline-block; очистит этот элемент из плавающых элементов любых сторон.