Kesan Float pada Ibu Bapa dalam CSS

Katakan sekarang kita ada satu div, di dalamnya terdapat satu imej. Kita berikan sempadan kepada div itu, dan buat masa ini kita tidak berikan sifat float kepada imej.

Mari kita lihat bagaimana rupanya dalam pelayar:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}

Результат:

Sekarang mari kita tetapkan sifat float untuk imej dengan nilai left. Dalam kes ini satu perkara yang menakjubkan akan berlaku - ketinggian ibu bapa akan hilang, sempadan bawahnya akan bermula serta-merta selepas sempadan atas, dan imej akan terkeluar dari bawah ibu bapanya:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Jadi, elemen yang diberikan sifat float, tidak mengembangkan ibu bapanya dari segi ketinggian.

Mari kita ubah nilai sifat float daripada left kepada nilai right. Tingkah laku ibu bapa tidak akan berubah, tetapi imej akan mula terapung di sebelah kanan:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат: