CSS-ում float հատկության ներածություն

Ենթադրենք ունենք div երկար տեքստով: Եկեք տեքստի սկզբում տեղադրենք նկար.

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

cssdiv {
  width: 400px;
  text-align: justify;
}

Результат:

Ինչպես տեսնում եք, նկարի ներքևի մասը տեղակայված է տեքստի առաջին տողում, իսկ մնացած մասը բարձրանում է վերև: Նկարի աջ կողմում մեծ դատարկ տարածք է ստեղծվում: Եկեք անենք, որ տեքստը լրացնի այդ դատարկ տարածքը: Դրա համար նկարին կտանք float հատկությունը left արժեքով.

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

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: left;
}

Результат:

Այսպիսով, այժմ նկարը լողում է ձախից, իսկ տեքստը հոսում է նրա շուրջը համապատասխանաբար աջից: Ընդ որում նկարի կողքին գտնվող դատարկ տարածքը վերանում է:

Կարելի է ստիպել, որ նկարը լողա ոչ թե ձախից, այլ աջից: Դրա համար float հատկությունը կդնենք right արժեքով.

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

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: right;
}

Результат: