Lez.7 - Corso Avanzato Css
Proprietà Float
- Galleggiare, Fluttuare nel Documento
La Proprietà float:
Nel momento in cui si usa la proprietà float su un elemento, l'elemento si estrae dal flusso della pagina lasciando lo spazio che occupava ad altri elementi.
I valori che accetta la proprietà float sono:
- float: none; none (nessuno) valore di defaut significa che float è disabilitato.
- float: inherit; inherit (ereditato) significa che float eredita dal contenitore padre.
- float: left; left (sinistra) significa che l'elemento fluttua sulla sinistra del documento.
- float: right; right (destra) significa che l'elemento fluttua sulla destra.
Il Codice:
I valori che accetta la proprietà float sono:
- float: none; none (nessuno) valore di defaut significa che float è disabilitato.
- float: inherit; inherit (ereditato) significa che float eredita dal contenitore padre.
- float: left; left (sinistra) significa che l'elemento fluttua sulla sinistra del documento.
- float: right; right (destra) significa che l'elemento fluttua sulla destra.
Il Codice:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Float, Galleggiare, Fluttuare</title>
<meta charset="utf-8">
<style type="text/css">
#uno {
background-color: lawngreen;
width: 49%;
float: left;
}
#due {
background-color: pink;
width: 49%;
float: right;
}
p {
text-align: justify;
}
</style>
</head>
<body>
<h1>Float, Galleggiare, Fluttuare</h1>
<div id="uno">
<h2>Colonna sx</h2>
<p>Testo messo a caso per far vedere la proprietà float. Testo messo a caso per far vedere la proprietà float. Testo messo a caso per far vedere la proprietà float. Testo messo a caso per far vedere la proprietà float. </p>
</div>
<div id="due">
<h2>Colonna dx</h2>
<p>Testo messo a caso per far vedere la proprietà float. Testo messo a caso per far vedere la proprietà float. Testo messo a caso per far vedere la proprietà float. Testo messo a caso per far vedere la proprietà float. </p>
</div>
</body>
</html>