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 հատկությունը, չեն ընդարձակում իրենց ծնողի բարձրությունը:

Եկեք float հատկությանը left-ի փոխարեն տանք right արժեքը: Ծնողի վարքագիծը չի փոխվի, բայց նկարը կսկսի լողալ աջից.

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

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

Результат: