Articles
Introduzione al CSS
Proprietà CSS relative al float

Proprietà CSS relative al float

Questo articolo spiega le proprietà CSS relative al float.

Puoi imparare l'uso e la sintassi delle proprietà float e clear.

YouTube Video

HTML per Anteprima

css-float.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-float.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Layout</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>float</h3>
23            <section style="height: auto; color: black;">
24                <header><h4>float: left</h4></header>
25                <section class="sample-view">
26                    <div class="float-left">float left</div>
27                    <div class="content">
28                        <p>
29                            paragraph 1-1
30                            paragraph 1-2
31                        </p>
32                        <p>paragraph 2</p>
33                    </div>
34                    <div class="clearfix"></div>
35                </section>
36            </section>
37            <section style="height: auto; color: black;">
38                <header><h4>float: right</h4></header>
39                <section class="sample-view">
40                    <div class="float-right">float right</div>
41                    <div class="content">
42                        <p>
43                            paragraph 1-1
44                            paragraph 1-2
45                        </p>
46                        <p>paragraph 2</p>
47                    </div>
48                    <div class="clearfix"></div>
49                </section>
50            </section>
51        </article>
52    </main>
53</body>
54</html>

Proprietà CSS relative al float

Proprietà float e clear 

 1.content {
 2    width: 300px;
 3    height: 100px;
 4}
 5
 6.content p {
 7    background-color: lightblue;
 8    margin: 10px;
 9}
10
11.float-left {
12    float: left;
13    width: 150px;
14    margin-right: 20px;
15    background-color: lightblue;
16}
17
18.float-right {
19    float: right;
20    width: 150px;
21    margin-right: 20px;
22    background-color: lightblue;
23}
24
25.clearfix {
26    clear: both;
27    display: none;
28}

float è una delle proprietà CSS utilizzate per far fluttuare un elemento a sinistra o a destra all'interno del suo elemento padre, consentendo agli altri elementi di avvolgersi attorno ad esso. La proprietà float viene spesso utilizzata per piazzare immagini o elementi box attorno al testo, ma il suo utilizzo è diminuito poiché i metodi di layout più recenti come flex e grid sono diventati la norma.

  • Nella classe float-left, la proprietà float è impostata su left. L'elemento applicato fluttua sul lato sinistro dell'elemento padre e il prossimo elemento si avvolge a destra.
  • La classe float-right imposta la proprietà float su right. L'elemento applicato si sposta sul lato destro del suo genitore e l'elemento successivo si dispone a sinistra attorno ad esso.
  • Nella classe clearfix, la proprietà clear è impostata su both. Utilizzando questa classe si impedisce al successivo elemento di avvolgersi attorno a quello flottante.

Come utilizzare float

Valori
  • left: Fa fluttuare l'elemento a sinistra, consentendo agli altri elementi di avvolgersi sul lato destro.
  • right: Fa fluttuare l'elemento a destra, consentendo agli altri elementi di avvolgersi sul lato sinistro.
  • none: Questo è il valore predefinito e non fa fluttuare l'elemento.
  • inherit: Eredita il valore della proprietà float dall'elemento padre.
Proprietà clear
  • Quando si utilizza float, il successivo elemento potrebbe avvolgersi attorno a quello flottante. Per evitarlo, si utilizza la proprietà clear. I valori di clear sono i seguenti:.
    • left: Evita gli elementi flottati a sinistra.
    • right: Evita gli elementi flottati a destra.
    • both: Evita gli elementi flottati sia a sinistra che a destra.
    • nessuno: Consente agli elementi di galleggiare attorno. Questo è il valore predefinito.

Note

  • Quando si utilizza float, può verificarsi un problema in cui l'altezza dell'elemento genitore ignora l'altezza dell'elemento flottato. Per evitare ciò, usa la tecnica clearfix oppure overflow: hidden; sull'elemento genitore.
  • Nel design responsivo o nei layout complessi, float può essere più difficile da gestire rispetto a flex o grid, quindi si consiglia di utilizzare flex o grid.
Riepilogo

float è una tecnica vecchia per allineare elementi a sinistra o a destra, permettendo al testo o ad altri elementi di avvolgerli, e talvolta è ancora usata per layout semplici o l'avvolgimento delle immagini. Tuttavia, per creare layout più flessibili e semplici, è consigliato l'uso di flexbox o grid.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative all'interfaccia utentePanoramica del design reattivo in CSS