Il chiaro La proprietà CSS è stata parte dei CSS da CSS1. Permette di specificare quali elementi possono fluttuare accanto all'elemento cancellato e su quale lato / i. Il chiaro la proprietà ha cinque valori possibili:
nessunasinistradestratutti e dueereditare
Come utilizzare la proprietà clear CSS
Il modo più comune di usare il chiaro la proprietà è dopo aver usato un galleggiante proprietà su un elemento. Per esempio:
- Testo accanto alla mia immagine.
- Testo che è sotto la mia immagine.
Tutti gli elementi sono impostati su chiara: nessuno;, quindi se non vuoi che altri elementi galleggiano a fianco di qualcosa, devi cambiare il chiaro stile.
Quando stai sgombrando i carri, abbini il chiaro al galleggiante. Quindi se hai fatto fluttuare l'elemento a sinistra, allora dovresti schiarirti a sinistra. Il tuo oggetto float continuerà a fluttuare, ma l'elemento cancellato e tutto ciò che segue sarà visualizzato sotto di esso sulla pagina web.
Se hai elementi fluttuanti sia a destra che a sinistra, puoi cancellare solo un lato o puoi cancellare tutti e due.
Uso chiaro nei layout
Il modo più comune in cui la maggior parte dei designer usa il chiaro la proprietà è nel layout degli elementi della pagina. Potresti avere un'immagine che galleggia all'interno di un blocco di testo e vuoi che il prossimo paragrafo inizi sotto l'immagine, oppure potresti avere un'intera colonna di testo che vuoi mettere a galla accanto a un altro gruppo di testo, con del testo che appare sotto.
Ecco l'HTML per un layout in questo modulo. Ha un contenitore div in possesso di un altro che è flottato a sinistra.
Questo funzionerà bene, con il div più breve fluttuante a sinistra del resto del contenuto del div principale. Puoi cancellare il testo accanto alla casella fluttuante semplicemente aggiungendo un tag dove vuoi che inizi a scrivere sotto la casella fluttuante. Ma il problema arriva quando la scatola fluttuante è più lunga del contenuto adiacente. Quindi, come puoi vedere, il colore di sfondo della casella principale non viene portato in fondo alla casella fluttuante. Fortunatamente, c'è un modo semplice per risolvere questo problema: la proprietà. Impostando la casella principale su
Un div breve flottato
Contenuto all'interno del div contenitore che si troverà alla destra del div floated.overflow: auto; il colore di sfondo rimarrà accanto alla scatola fluttuante più lunga fino in fondo, come mostrato in questo esempio.
