CSSте учуп турган элементтер (floats) кантип иштейт?

float элементти документтин нормал агымынан чыгарып салат, башка элементтерге (адатта тексттик же inline элементтерге) анын тараптан айланууга мүмкүндүк берет (left, right).

Негизги принциптер:

• Агымдан чыгарып салуу: float менен белгиленген элемент документтин нормал агымында орун албаса керек.
• Айлануу: Жакынкы блок элементтер float элементин орун албастан, алардын мазмуну (inline элементтер) белгиленген тараптан айланат.
• Атага таасир: float элементтерин камтыган ата контейнердин бийиктиги кыскарат, алардын бийиктигин эске албастан.
• clear: clear өзгөчөлүгү (left, right, both) float элементинен кийин келген элементтердин айлануусун алдын алуу үчүн колдонулат.

Мисал:

.image {
  float: left; /* Сүрөт солго жылдырылат */
  margin-right: 10px; /* Текст үчүн оң жактан аралыктын кошушу */
}

.text {
  /* Текст сүрөттү айлантат */
}

Тууралаулар:

• float колдонуу кыйынчылык түзүүчү макеттер үчүн эскирген жана Flexbox же Grid менен алмаштырылган.
• float дагы эле сүрөттөр менен тексттин айлануу эффектин түзүү үчүн пайдалуу болушу мүмкүн.
• float колдонулганда ата контейнердин кулап калуусун алдын алуу үчүн "clearfix" же overflow: hidden/auto техникалары колдонулат.