Таъсири элементҳои float ба волидайн дар CSS

Бигзор акнун мо як div дошта бошем, ки дар он як акс ҷойгир аст. Ба div ҳудуд медиҳем, ва ба акс ҳоло хусусияти float-ро надода мебинем.

Биёед бинем, ки ин чӣ гуна дар браузер намоиш дода мешавад:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Акнун биёед ба акс хусусияти float бо қимати left таъин кунем. Дар ин ҳолат воқеаи аҷибе рух медиҳад - баландии волидайн нопадид мешавад, ҳудуди поёнии он дар давоми ҳудуди болоӣ оғоз меёбад, ва акс аз поёни волидайни худ берун мебарояд:

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

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

Результат:

Маълум мешавад, ки элементҳое, ки ба онҳо хусусияти float таъин шудааст, волидайни худро дар баландӣ васеъ намекунанд.

Биёед ба ҷои қимати left барои хусусияти float қимати right-ро нависем. Рафтори волидайн тағйир намеёбад, аммо акс аз тарафи рост шиноварӣ кардан оғоз мекунад:

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

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

Результат: