La proprietà clear è importante per controllare il comportamento dei float.
<div class="box">...</div>
<section>...</section>.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
Mi sento come se galleggiassi!
</div>
In questo caso, section in realtà si trova dopo il div. Tuttavia, dato che div sta flottando a sinistra, ecco cosa accade: il testo in section si disponde attorno a div e section circonda il tutto. E se volessimo far comparire section dopo l'elemento flottante?
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
Mi sento come se galleggiassi!
</div>
Usando clear abbiamo spostato adesso questa sezione al di sotto del div flottante. Usa il valore left per sgomberare gli elementi flottanti a sinistra. Puoi anche usare right e both