Properti float untuk Blok di CSS

Properti float tidak hanya berlaku untuk gambar, tetapi juga untuk blok lainnya.

Mari kita buktikan.

Misalkan kita memiliki blok induk dengan kelas parent, dan di dalamnya terdapat teks dan blok anak dengan kelas child. Kedua blok diberikan border, dan anak juga diberikan lebar dan tinggi:

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

Результат:

Sekarang mari kita atur float untuk anak ke nilai left - teks akan mulai mengelilingi blok kita:

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

Результат: