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 </article>
38 </main>
39</body>
40</html>Proprietà CSS relative al float
Proprietà float e clear
1.float-left {
2 float: left;
3 width: 150px;
4 margin-right: 20px;
5 background-color: lightblue;
6}
7
8.content {
9 width: 300px;
10 height: 100px;
11}
12
13.content p {
14 background-color: lightblue;
15 margin: 10px;
16}
17
18.clearfix {
19 clear: both;
20 display: none;
21}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 suleft. L'elemento applicato fluttua sul lato sinistro dell'elemento padre e il prossimo elemento si avvolge a destra. - Nella classe
clearfix, la proprietàclearè impostata suboth. Utilizzando questa classe si impedisce al successivo elemento di avvolgersi attorno a quello flottante. Qui impediamo al prossimo elemento di flottare dopo l'immagine per mantenere il layout.
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àfloatdall'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 diclearsono 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 tecnicaclearfixoppureoverflow: hidden;sull'elemento genitore. - Nel design responsivo o nei layout complessi,
floatpuò essere più difficile da gestire rispetto aflexogrid, quindi si consiglia di utilizzareflexogrid.
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.