Տեքստ ֆլոատների ծնողում CSS-ում

Եկեք հանենք height հատկությունը div-ի համար և տեղադրենք մի փոքր տեքստ նկարից առաջ:

Այս դեպքում մեր div-ի բարձրությունը հավասար կլինի տեքստի բարձրությանը, իսկ նկարը կմնա div-ից դուրս:

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;
}

Результат:

Եկեք ներքևում ավելացնենք ևս մեկ div - նկարը կխփի նաև դրան.

html<div>
  <img src="img.png" alt="">
  տեքստ
</div>
<div>
  տեքստ
</div>

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

Результат:

Եթե առաջին div-ին ավելացնենք այնքան շատ տեքստ, որ բարձրությամբ այն մեծ լինի նկարից - այն չի խփի երկրորդ div-ին.

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  տեքստ
</div>

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

Результат:

Այս պահը շատ կարևոր է - մշակման ընթացքում կարող է լինել, որ ինչ-որ բլոկում դուք ունենաք բավականին շատ տեքստ, իսկ հետո կայքի իրական աշխատանքի ժամանակ այս բլոկում կլինի պլանավորվածից ավելի քիչ տեքստ: Կստացվի, որ այս դեպքում կհայտնվի լողացող տարրերի հարևան բլոկների վրա խփելու խնդիրը: