CSS Float, Clear e Overflow Properties | Spiegato

Il posizionamento degli elementi HTML nei luoghi appropriati è molto significativo quando si progetta il layout di un sito Web. CSS fornisce proprietà di posizionamento multipli che aiutano gli sviluppatori a strutturare meglio la posizione degli elementi HTML.

Oltre a questo, durante lo sviluppo del sito Web, ci imbattiamo spesso in determinate circostanze in cui il contenuto presente in determinati elementi HTML trabocca. Al fine di gestire tali situazioni CSS fornisce anche alcune proprietà.

In questa guida, passerai attraverso le seguenti proprietà CSS.

1. Proprietà galleggiante
2. Proprietà chiara
3. Proprietà overflow

Cominciamo.

Proprietà galleggiante

La proprietà float viene definita proprietà di posizionamento utilizzata nel posizionamento del contenuto e strutturando il layout di un sito Web. Questa proprietà posiziona un elemento in modo tale che altri elementi lo avvolgono.

Sintassi

Float: valore;

Come altre proprietà CSS, la proprietà float rende determinati valori che sono elencati di seguito.

Valore	Descrizione
nessuno	Questo è un valore predefinito che impedisce a un elemento di galleggiare e visualizza l'elemento in cui esiste nel testo.
Sinistra	Per far galleggiare un elemento a sinistra questo valore viene utilizzato.
Giusto	Per far galleggiare un elemento a destra questo valore viene utilizzato.
iniziale	Per assegnare il valore originale alla proprietà questo valore viene utilizzato.
ereditare	Per ereditare questa proprietà dalla sua proprietà genitore questo valore viene utilizzato.

Ecco alcuni esempi della proprietà Float.

Esempio 1
Supponiamo che tu stia visualizzando un po 'di testo sul tuo sito Web e desideri aggiungere un'immagine pertinente al lato destro del testo. Utilizzare il seguente frammento di codice.

Html

I cani sono creature estremamente leali. Sono carini, giocosi e sono il migliore amico di un uomo. Ci sono più razze di cani. Alcune razze di cani sono Bull Dog, Siberian Husky, Golden Retriever e molti altri.

CSS

img
Float: giusto;
larghezza: 190px;
Altezza: 170px;

Nell'esempio sopra, abbiamo scritto un po 'di testo sui cani e galleggiavamo l'immagine del cane sul lato destro. Ecco l'output.

Immagine del cane galleggiava a destra con successo.

Se nello stesso esempio, la proprietà float è impostata su "nessuno" anziché "a destra", l'immagine del cane verrà visualizzata dove si verifica nel testo. Ecco come apparirà.

Esempio 2
A volte per aggiungere bellezza al testo che appare sul sito Web usi famiglie e dimensioni diverse. Oltre a questo fluttuare il testo in una posizione appropriata è anche abbastanza importante. Questo esempio mostra come fluttuare una lettera in un paragrafo.

Html

DGli OG sono creature estremamente leali. Sono carini, giocosi e sono il migliore amico di un uomo. Ci sono più
razze di cani. Alcune razze di cani sono Bull Dog, Siberian Husky, Golden Retriever e molti altri. Se stai attraversando
La depressione o una certa cattiva fase nella vita, è altamente suggerita un cane. Oltre a questi cani sono anche usati per la sicurezza
scopi.

CSS

span
Float: a sinistra;
larghezza: 0.8em;
Height di linea: 90%;
Font-size: 60px;
Font-weight: audace;
Font-Family: Times New Roman;

Nell'esempio sopra, stiamo fluttuando la prima lettera del testo a sinistra e dandogli un certo stile. L'output è mostrato di seguito.

La prima lettera galleggiava a sinistra con successo.

Ora che abbiamo compreso la proprietà Float CSS, impariamo a conoscere la proprietà CSS Clear.

Proprietà chiara

La proprietà chiara è anche una proprietà di posizionamento che gestisce gli elementi accanto agli elementi che sono galleggiati.

Se si assegna una proprietà trasparente a un elemento nella stessa direzione del galleggiante, verrà spinto verso il basso sotto gli elementi galleggiati, altrimenti, se c'è abbastanza spazio, l'elemento si adatterà accanto all'elemento galleggiato in orizzontale.

Sintassi

Clear: valore;

La proprietà chiara mostra alcuni valori che sono spiegati di seguito.

Valore	Descrizione
nessuno	Questo è un valore predefinito che impedisce agli elementi galleggiati di eliminare.
Sinistra	Questo valore posiziona elementi verso il basso a sinistra degli elementi galleggiati.
Giusto	Questo valore posiziona elementi a destra degli elementi galleggiati.
Entrambi	Questo valore posiziona elementi sia in basso a sinistra, sia a destra degli elementi galleggiati.
iniziale	Questo valore assegna alla proprietà il suo valore originale.
ereditare	Per ereditare questa proprietà dalla sua proprietà genitore questo valore viene utilizzato.

Esploriamo ulteriormente la proprietà chiara con l'aiuto di esempi adeguati.

Esempio 1
Impareremo come funziona la proprietà chiara usando l'esempio del cane menzionato nella sezione sopra.

Html

I cani sono creature estremamente leali. Sono carini, giocosi e sono il migliore amico di un uomo. Ci sono più razze di cani. Alcune razze di cani sono Bull Dog, Siberian Husky, Golden Retriever e molti altri.

CSS

img
Float: a sinistra;
larghezza: 170px;
Altezza: 170px;

Ora nell'esempio sopra ci sono due elementi che sono

E . Tuttavia, solo viene fluttuato a sinistra. Ora, per capire come funziona la proprietà chiara, applicheremo chiari al

elemento. Utilizzare il seguente frammento di codice.

P.chiaro
chiaro: a sinistra;

Qui abbiamo applicato chiaro al

nella stessa direzione del galleggiante.

Produzione
Prima di applicare chiaro.

Dopo aver applicato chiaro.

Il testo è stato cancellato a sinistra verso il basso dell'immagine galleggiata.

È possibile utilizzare altri valori della proprietà chiara usando l'esempio sopra per vedere come funzionano.

Proprietà overflow

La proprietà di Overflow controlla il comportamento del contenuto che trabocca l'area specificata di un elemento, inoltre, la proprietà di Overflow è progettata solo per elementi a livello di blocco.

Sintassi

Overflow: valore;

Di seguito sono riportati valori diversi della proprietà di overflow:

Valore	Descrizione
visibile	Questo è un valore predefinito e visualizzerà tutto il contenuto che supera l'area specificata dell'elemento.
nascosto	Questo valore nasconde tutto il contenuto che supera l'area specificata dell'elemento.
scorrere	Questo valore nasconde il contenuto che supera l'area dell'elemento al suo interno e fornisce barre di scorrimento sia verticali che orizzontali per visualizzare il contenuto.
auto	Questo valore aggiunge una barra di scorrimento solo quando necessario.
iniziale	Questo valore assegna alla proprietà il suo valore originale.
ereditare	Per ereditare questa proprietà dalla sua proprietà genitore questo valore viene utilizzato.

Ora, per una migliore comprensione di questa proprietà, considereremo un esempio e attraverso ciò, dimostreremo diversi valori della proprietà di overflow.

Esempio.

In questo esempio, creeremo un e posizioneremo alcuni contenuti al suo interno e vedremo come funzionano i valori delle proprietà di overflow diversi.

Html

La proprietà di Overflow controlla il comportamento del contenuto che trabocca l'area specificata di un elemento, inoltre, la proprietà di Overflow è progettata solo per elementi a livello di blocco.

Illustriamo per la prima volta il valore visibile della proprietà overflow.

CSS

.Div1
Overflow: visibile;
Background-color: Rosybrown;
larghezza: 100px;
Altezza: 145px;
Bordo: 2px Black solido;

Produzione

Utilizzando il valore visibile della proprietà overflow, il contenuto viene mostrato al di fuori dell'area della scatola.

Ora illustreremo il valore nascosto della proprietà overflow. Ecco lo snippet di codice.

.Div1
Overflow: nascosto;

Produzione

Il contenuto che supera l'area della scatola è nascosto.

Lo snippet di codice per il valore di scorrimento della proprietà overflow è il seguente.

.Div1
Overflow: Scroll;

Produzione

Utilizzando le barre di scorrimento, il resto del contenuto può essere visualizzato.

E ora vedremo come funziona il valore automatico della proprietà di overflow.

.Div1
Overflow: auto;

Produzione

Secondo il requisito il valore automatico ha aggiunto solo la barra di scorrimento verticale.

Utilizzando il valore automatico, il contenuto traboccante è nascosto all'interno della casella correttamente.

Conclusione

IL Proprietà galleggiante viene utilizzato per posizionare il contenuto e strutturare il layout di un sito Web, inoltre, questa proprietà posiziona un elemento in modo tale che altri elementi lo avvolgono. IL proprietà chiara, D'altra parte, gestisce gli elementi accanto agli elementi che sono galleggiati. Nel frattempo, il Proprietà overflow controlla il comportamento del contenuto che trabocca l'area specificata di un elemento. Tutte queste proprietà mostrano alcuni valori che eseguono azioni diverse su queste proprietà. Queste proprietà e i loro valori sono spiegati in profondità con l'aiuto di esempi in questo articolo.