Prestiamo attenzione agli svantaggi del float. Come si comportano tra loro gli elementi block e inline e se usarli insieme. Analizziamo cos'è una perdita e come affrontarla.
Nonostante il fatto che nell'ultimo articolo abbiamo creato una semplice griglia per il sito utilizzando i float, sono originariamente destinati a regolare il flusso degli elementi nel testo. Float ha tre significati: left - gli elementi si attaccano al margine sinistro; a destra: gli elementi vengono premuti sul bordo destro; none - La modalità a capo è disabilitata.
Un elemento a capo automatico può essere ridimensionato e riempito, ma se l'elemento è in linea si comporterà come un elemento di blocco.
.blocco1 {
galleggiante: sinistro;
larghezza: 150px;
}
.blocco2 {
galleggiante: a destra;
larghezza: 150px;
}
C'è un altro problema quando si usano i float, che stanno cadendo fuori dal flusso. Appare quando i blocchi vanno uno dopo l'altro, ma solo uno di essi ha la proprietà float, quindi sarà sopra il resto, perché non vede altri blocchi. Gli elementi in linea si avvolgeranno attorno agli elementi float, ma il blocco contenente questo testo rimarrà sotto l'elemento float.
Ma come interagisce float con float?
Si comportano come un testo: rimangono uno dopo l'altro finché c'è spazio libero, quindi si spostano su una nuova riga. Pertanto, con l'aiuto dei galleggianti, abbiamo iniziato a costruire griglie. Se non è rimasto spazio, vengono spostati oltre la larghezza del sito, ovvero non vanno da nessuna parte.
Se il float non vede elementi di blocco semplici, è possibile insegnare agli elementi di blocco a vedere il float. Usiamo la proprietà clear, che disabilita l'avvolgimento da tutti i lati (o da quelli selezionati). Cioè, un elemento con clear cadrà sotto l'elemento con float.
