CSS:n float-ominaisuus lohkoille

float-ominaisuutta ei sovelleta vain kuviin, vaan myös mihin tahansa muihin lohkoihin.

Tarkastellaanpa tätä.

Oletetaan, että meillä on ylälohko, jolla on luokka parent, ja sen sisällä on tekstiä ja alalohko luokalla child. Molemmille lohkoille on asetettu reunus, ja alalohkolle myös leveys ja korkeus:

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

Результат:

Asetetaan nyt alalohkon float arvoksi left - teksti alkaa kiertää lohkoamme:

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

Результат: