Il float proprietà specifica se un elemento dovrebbe galleggiare.
La clear proprietà viene utilizzata per controllare il comportamento degli elementi galleggianti.
La proprietà float
Nel suo uso più semplice, il float proprietà può essere utilizzata per avvolgere il testo intorno alle immagini.
L'esempio seguente specifica che l'immagine deve galleggiare verso destra in un testo:
Il clear di proprietà
La clear proprietà viene utilizzata per controllare il comportamento degli elementi galleggianti.
Elementi dopo un elemento galleggiante scorrerà intorno. Per evitare questo, utilizzare la clear proprietà.
La clear proprietà specifica su cui lati di un elemento elementi galleggianti non sono autorizzati a stare a galla:
Il clearfix Hack - overflow: auto;
Se un elemento è più alto rispetto all'elemento che lo contiene, ed è mobile, sarà traboccare di fuori del suo contenitore.
Poi possiamo aggiungere overflow: auto; l'elemento che contiene per risolvere questo problema:
Disposizione Esempio Web
E 'comune di fare tutto il layout web utilizzando il float di proprietà:
Esempio
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
} Prova tu stesso " 
Altri esempi
Un'immagine con bordo e margini che galleggia sulla destra in un paragrafo
Facciamo un galleggiante immagine verso destra in un paragrafo. Aggiungere confine e margini per l'immagine.
Un'immagine con una didascalia che galleggia sulla destra
Lasciate un'immagine con un galleggiante didascalia alla destra.
Lasciate che la prima lettera di un paragrafo galleggiante a sinistra
Lasciate che la prima lettera di un paragrafo galleggiante a sinistra e lo stile della lettera.
Creazione di un menu orizzontale
Utilizzare galleggiante con una lista di collegamenti ipertestuali per creare un menu orizzontale.
La creazione di una home page senza tabelle
Utilizzare galleggiante per creare una homepage con un colpo di testa, piè di pagina, il contenuto a sinistra e il contenuto principale.
Tutte le proprietà CSS Float
| Proprietà | Descrizione |
|---|---|
| clear | Specifica su quali lati di un elemento in cui gli elementi galleggianti non sono autorizzati a stare a galla |
| float | Specifica se un elemento deve galleggiare |
| overflow | Specifica che cosa succede se il contenuto trabocca il vaso di un elemento |
| overflow-x | Specifica cosa fare con la Sinistra / bordi destro del contenuto se trabocca zona contenuto dell'elemento |
| overflow-y | Specifica cosa fare con i primi / bordi inferiori del contenuto se trabocca zona contenuto dell'elemento |