Proprietà float per blocchi in CSS

La proprietà float non si applica solo alle immagini, ma a qualsiasi altro blocco.

Verifichiamolo.

Supponiamo di avere un blocco genitore con classe parent, e all'interno si trovano del testo e un blocco figlio con classe child. Ad entrambi i blocchi è assegnato un bordo, e al figlio anche una larghezza e un'altezza:

html<div class="parent">
  <div class="child"></div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Ora impostiamo float per il figlio al valore left - il testo inizierà a fluire attorno al nostro blocco:

html<div class="parent">
  <div class="child"></div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат: