sostituire il chiaro: entrambi con pseudo classe

In precedenza, quando avevo i blocchi float, e mi fermerò il float, ho usato;sostituire il chiaro: entrambi con pseudo classe

<div style="clear:both"></div>

Ma ora, io sono a risolvere questo problema con la classe pseudo:

.last_floating_div:after { 
content: ""; 
display: table; 
clear: both; 
}

mi ha sempre funziona perfettamente. Ma oggi ... Non funziona ...! Guarda questo chiaro esempio: http://jsfiddle.net/YsueS/2/

So che il mio problema è un problema per principianti. Ho venduto questo problema così tante volte ... davvero non capisco perché non funzioni qui!

Mille grazie a tutti!

fonte

2013-10-31 Damien

E 'questo quello che volevi? http://jsfiddle.net/YsueS/3/ –

Grazie Josh, il risultato è perfetto! In questo caso, la soluzione di JoshC sembra essere più leggera, ma tengo la soluzione per ulteriori esigenze :) – Damien

Nessun problema! L'overflow è il modo più semplice e ampiamente utilizzato per raggiungere questo obiettivo. Puoi anche usare 'overflow: auto' per gli elementi assoluti che credo. –

Sicuro: è possibile cancellarlo tramite un clearfix :after, tuttavia la soluzione più ottimale e leggera sarebbe semplicemente quella di impostare overflow:hidden sul genitore, ottenendo l'effetto desiderato con molto meno codice.

#mention { 
    overflow: hidden; 
}

jsFiddle here

Per rispondere alla domanda direttamente però, si dovrebbe avere applicato il :after clearfix al #mentions - il genitore, al posto del bambino .. jsFiddle here funziona.

fonte

2013-10-31 19:42:36

'overflow: hidden;' sarebbe la migliore risposta per IE meno recenti? –

Grazie! Hai ragione, in questo caso, l'overflow è davvero leggero rispetto alla pseudo classe :) – Damien

Penso che tu abbia bisogno di un #mentione: dopo fare quello che stai cercando.

per esempio,

#mention:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
#mention { display: inline-block; } 

* html #mention{ height: 1%; } /* for older ie */ 
#mention { display: block; }

WORKING DEMO

Spero che questo aiuti.

fonte

2013-10-31 19:43:11 Nitesh

phhew. hack ... – Jawad

No. Risposte per la compatibilità cross browser originale :) - @Jawad – Nitesh

ok. +1 di cime. – Jawad

Se si aggiunge lo :after all'id mention, si otterrà l'effetto desiderato.

#mention:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

JSFIDDLE

fonte

2013-10-31 19:44:09

sostituire il chiaro: entrambi con pseudo classe

risposta

Problemi correlati