Layout CSS : chiaro e chiaro
La chiara Proprietà
Quando usiamo la floatproprietà e vogliamo l'elemento successivo sotto (non a destra o a sinistra), dovremo usare la clear
proprietà.
La clearproprietà specifica cosa dovrebbe accadere con l'elemento che si trova accanto a un elemento mobile.
La clearproprietà può avere uno dei seguenti valori:
-
none- L'elemento non viene spinto sotto gli elementi mobili a sinistra oa destra. Questo è predefinito -
left- L'elemento viene spinto sotto gli elementi mobili a sinistra -
right- L'elemento viene spinto sotto gli elementi flottanti a destra -
both- L'elemento viene spinto sotto gli elementi flottanti sinistro e destro -
inherit- L'elemento eredita il valore clear dal suo genitore
Quando si cancellano i float, è necessario far corrispondere il clear al float: se un elemento è flottante a sinistra, è necessario cancellare a sinistra. Il tuo elemento mobile continuerà a fluttuare, ma l'elemento cancellato apparirà sotto di esso nella pagina web.
Esempio
Questo esempio cancella il float a sinistra. Qui, significa che l'elemento <div2> viene spinto sotto l'elemento <div1> mobile a sinistra:
div1 {
float: left;
}
div2 {
clear: left;
}
Il clearfix Hack
Se un elemento flottante è più alto dell'elemento contenitore, "traboccherà" al di fuori del suo contenitore. Possiamo quindi aggiungere un hack clearfix per risolvere questo problema:
Senza Clearfix
Con Clearfix
Esempio
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after pseudo-element in a later chapter.