Матн дар волидайни флоатҳо дар CSS

Биёед хосияти height барои диви ҳазф кунем ва каме матн пеш аз акс гузорем.

Дар ин ҳолат баландии диви мо баробар хоҳад буд ба баландии матн, ва акс ҳамчунон аз див берун мебарояд:

html<div>
  матн
  <img src="img.png" alt="">
</div>

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

Результат:

Биёед матнро баъд аз акс гузорем - натиҷа тағйир намеёбад:

html<div>
  <img src="img.png" alt="">
  матн
</div>

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

Результат:

Биёед тавре созем, ки акс дар канори чап шновар шавад - натиҷа монанд хоҳад буд:

html<div>
  <img src="img.png" alt="">
  матн
</div>

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

Результат:

Биёед аз поён як диви дигар илова кунем - акс бар он ҳам меафтад:

html<div>
  <img src="img.png" alt="">
  матн
</div>
<div>
  матн
</div>

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

Результат:

Агар ба диви якум он қадар зиёд матн илова кунем, ки аз рӯи баландӣ аз акс бузургтар шавад - акс ба диви дуюм намеафтад:

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  матн
</div>

cssdiv {
  text-align: justify;
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Ин лаҳза хеле муҳим аст - дар вақти барномасозӣ метавонад чунин бошад, ки дар ягон блок ба шумо матни кофӣ мавҷуд бошад, ва сипас дар вақти амали коркарди сомона дар ин блок матн камтар аз он чӣ пешбинӣ шудааст бошад. Малим мешавад, ки дар ин ҳолат мушкилии афтадани элементҳои шиновар ба блокҳои ҳамсоя зоҳир мешавад.