Come usare la classe .clearfix?

Question

Penso di fraintendere il concetto della classe .clearfix. Forse qualcuno può darmi una mano.

Sto cercando un modo per utilizzare float e clear senza rovinare il mio markup. Così ho pensato, è qui che può essere usato .clearfix.

All'interno di un H5BP-progetto vuoto, la mia marcatura assomiglia:

<div></div> 
    <div></div> 
    <div class="clearfix"></div> 
    <div></div> 
    <div></div> 
    <div class="clearfix"></div> 
    <div></div> 
    <div></div> 
    <div class="clearfix"></div> 

Di seguito il risultato. Mi aspettavo un tic tac toe-field, però. Qualcuno può dirmi:

1. Come posso raggiungere il mio obiettivo e
2. ciò che la classe .clearfix davvero può essere utilizzato per?

Answer 1

La classe clearfix viene utilizzata su un contenitore di cui tutti i bambini sono mobili. Se non lo si usasse, il contenitore non otterrebbe alcuna altezza (eccetto in IE). http://complexspiral.com/publications/containing-floats/

Quello che cercate non è un clearfix, ma solo uno clear. Puoi creare una classe
.clear { clear: both;}
e applicare quella al posto di clearfix che stai utilizzando ora.

Se volete saperne di più su clearfix, v'è abbondanza di informazioni là fuori:
What is a clearfix?

Ho creato un piccolo esempio per dimostrare l'uso di clearfix e clear: http://jsfiddle.net/hjXMG/1

Answer 2

È necessario dichiarare il clearfix, così nel tag (o nel file css) utilizzare:

<style type="text/css"> 
    .clearfix { 
     clear: both; 
    } 
</style> 

Ciò che fa, se si dispone di un galleggiante, e inserire un clearfix dopo di esso, il prossimo elemento scende.

Answer 3

• Clearfix è aggiunto circa blocchi galleggianti
• Cancella viene aggiunto dopo blocchi galleggianti