A float tulajdonság CSS blokkokhoz

A float tulajdonság nem csak képekre alkalmazható, hanem bármely más blokkra is.

Ellenőrizzük ezt.

Tegyük fel, hogy van egy szülő blokkunk parent osztállyal, amelyben szöveg és egy gyermek blokk található child osztállyal. Mindkét blokkhoz van megadva keret, a gyermek blokkhoz pedig szélesség és magasság is:

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

Результат:

Állítsuk most a gyermek blokk float értékét left-re – a szöveg elkezdi körbeáramoltatni a blokkunkat:

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

Результат: