CSS-i plokkide float omadus

Omadus float ei kehti ainult piltide, vaid ka kõigi teiste plokkide puhul.

Kontrollime seda.

Olgem meil vanemplokk klassiga parent, mille sees on tekst ja lapsplokk klassiga child. Mõlemale plokile on määratud piirjoon ja lapsele veel laius ja kõrgus:

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;
}

Результат:

Määrame nüüd lapsele float väärtuseks left - tekst hakkab meie plokki ümber voolama:

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;
}

Результат: