Η ιδιότητα float για blocks στο CSS

Η ιδιότητα float εφαρμόζεται όχι μόνο σε εικόνες, αλλά και σε οποιαδήποτε άλλα blocks.

Ας το ελέγξουμε αυτό.

Ας υποθέσουμε ότι έχουμε ένα γονικό block με κλάση parent, και μέσα του βρίσκεται κείμενο και ένα παιδικό block με κλάση child. Και στα δύο blocks έχει οριστεί sborder, και στο παιδικό έχει οριστεί επίσης πλάτος και ύψος:

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

Результат:

Ας ορίσουμε τώρα στο παιδικό block την float στην τιμή left - το κείμενο θα αρχίσει να ρέει γύρω από το block μας:

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

Результат: