CSSda float elementlarning ota elementga ta'siri

Endi bizda chegarasi berilgan div va uning ichida rasm bor deylik. Rasmga hozircha float xususiyatini bermaymiz.

Keling, brauzerdagi ko'rinishini ko'ramiz:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Endi rasmga float xususiyatini left qiymatida beraylik. Bu holatda ajoyib hodisa yuz beradi - ota elementning balandligi yo'qoladi, uning pastki chegarasi yuqori chegarasidan keyin boshlanadi va rasm ota elementining pastidan chiqib ketadi:

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

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

Результат:

Ma'lum bo'ladiki, float xususiyati berilgan elementlar ota elementning balandligini oshirmaydi.

float xususiyatiga left o'rniga right qiymatini beraylik. Ota elementning harakati o'zgarmaydi, lekin rasm o'ng tomondan suza boshlaydi:

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

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

Результат: