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:
<div>
<img src="img.png" alt="">
</div>
div {
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:
<div>
<img src="img.png" alt="">
</div>
div {
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:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
