La proprietà CSS è una proprietà molto importante per il layout. Ti consente di posizionare i disegni della tua pagina web esattamente come vuoi che vengano visualizzati, ma per poterli utilizzare devi capire come funziona.
In un foglio di stile, la proprietà float CSS assomiglia a questa:
.right {float: right; }
Questo dice al browser che tutto con la classe di "destra" dovrebbe essere flottato a destra.
Lo assegneresti in questo modo:
class = "right" />
Cosa puoi far fluttuare con la proprietà float CSS?
Non puoi fluttuare ogni elemento su una pagina web. Puoi solo spostare gli elementi a livello di blocco. Questi sono gli elementi che occupano un blocco di spazio sulla pagina, come images (), paragraph (), divisions () e lists ().
Altri elementi che influenzano il testo, ma non creano una casella sulla pagina, sono chiamati elementi in linea e non possono essere flottati. Questi sono elementi come span (), interruzioni di riga (), forte enfasi () o corsivo ().
Dove galleggiano?
Puoi spostare gli elementi a destra o a sinistra. Qualsiasi elemento che segue l'elemento flottante scorrerà attorno all'elemento fluttuante sull'altro lato.
Ad esempio, se si sposta un'immagine a sinistra, qualsiasi testo o altri elementi che seguono lo scorreranno attorno a destra. E se faccio galleggiare un'immagine a destra, qualsiasi testo o altri elementi che seguono lo scorreranno attorno a sinistra. Verrà visualizzata un'immagine che viene inserita in un blocco di testo senza alcuno stile fluttuante, tuttavia il browser è impostato per visualizzare le immagini. Questo di solito è con la prima riga del seguente testo visualizzato nella parte inferiore dell'immagine.
Quanto faranno galleggiare?
Un elemento che è stato flottato si sposterà il più possibile a sinistra oa destra dell'elemento contenitore. Ciò si traduce in diverse situazioni a seconda di come il tuo codice è scritto. Per questi esempi, farò galleggiare un piccolo DIV elemento a sinistra:
- Se l'elemento float non ha una larghezza predefinita, occuperà tutto lo spazio orizzontale richiesto e disponibile, indipendentemente dal float. Nota: alcuni browser tentano di posizionare elementi accanto a elementi fluttuanti quando la larghezza non è definita, di solito dando all'elemento non flottato solo una piccola quantità di spazio. Quindi dovresti definisci sempre una larghezza su elementi flottati.
- Se l'elemento contenitore è l'elemento HTML, il floated
DIVsiederà sul margine sinistro della pagina. - Se l'elemento contenitore è esso stesso contenuto da qualcos'altro, il floated
DIVsiederà sul margine sinistro del contenitore. - È possibile nidificare elementi flottati e questo può comportare la fine del galleggiante in un luogo sorprendente. Ad esempio, questo float è un float a sinistra
DIVdentro un diritto galleggiavaDIV. - Gli elementi flottati si siederanno uno accanto all'altro se c'è spazio nel contenitore. Ad esempio, questo contenitore ha tre 100 px di larghezza
DIVelementi galleggiavano in un contenitore largo 400 px.
Puoi persino usare i float per creare un layout di galleria fotografica. Metti ogni miniatura (funziona meglio quando sono tutte della stessa dimensione) in a DIV con la didascalia e il galleggiante il DIV elementi nel contenitore. Non importa quanto sia ampia la finestra del browser, le miniature si allineano in modo uniforme.
Spegnere il galleggiante
Una volta che sai come far galleggiare un elemento, è importante sapere come disattivare il galleggiante. Spegni il float con la proprietà clear CSS. Puoi cancellare i float di sinistra, i float di destra o entrambi:
chiaro: a sinistra;chiaro: giusto;chiaro: entrambi;
Qualsiasi elemento per cui si imposta la proprietà clear apparirà sotto un elemento che è flottato in quella direzione. Ad esempio, in questo esempio i primi due paragrafi di testo non vengono cancellati, ma il terzo è.
Gioca con il chiaro valore di diversi elementi nei tuoi documenti per ottenere effetti di layout diversi. Uno dei layout fluttuanti più interessanti è una serie di immagini lungo la colonna destra o sinistra accanto ai paragrafi di testo. Anche se il testo non è abbastanza lungo da scorrere oltre l'immagine, puoi usare il chiaro su tutte le immagini per assicurarti che appaiano nella colonna piuttosto che accanto all'immagine precedente.
HTML (ripeti questo paragrafo):
Duis aute irure dolor sed fa eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.
Il CSS (per far fluttuare le immagini a sinistra):
img.float {float: left; clear: left; margin: 5px;}
E a destra:
img.float {float: right; chiara: right; margin: 5px;}
Usare i float per il layout
Una volta capito come galleggiante la proprietà funziona, puoi iniziare a usarla per disporre le tue pagine web. Questi sono i passi che passo per creare una pagina web fluttuante:
- Disegna il layout (su carta o in uno strumento di grafica o nella mia testa).
- Determina dove saranno le divisioni della pagina.
- Determina le larghezze dei vari contenitori e gli elementi al loro interno.
- Float tutto. Anche l'elemento contenitore più esterno viene spostato a sinistra in modo da sapere dove si troverà rispetto alla porta di visualizzazione del browser.
Finché si conoscono le larghezze (le percentuali vanno bene) delle sezioni di layout, è possibile utilizzare il comando galleggiante proprietà per metterli dove appartengono alla pagina. E la cosa bella è che non devi preoccuparti tanto del modello di box che è diverso per Internet Explorer o Firefox.
