CSSте кантип жүгүрүүчү элементтер (float) болот…

CSSте плавающие элементтер (float) — бул документтин кадимки агымынан элементти которуп, анын контейнеринин сол же оң жагына жайгаштырууга мүмкүндүк берген касиет. Кадимки элементтер жана текст бул плавающий элементти айланат.

float касиетинин негизги маанилери:

left: Элемент сол жакта плавает.
right: Элемент оң жакта плавает.
none: Элемент кадимки агымда калат (негизги мааниси).
inherit: Ата-энесинен маанини мурас катары алат.

Колдонуу мисалдары:

.float-left {
  float: left; /* Элемент сол жакта плавает */
  margin-right: 10px; /* Текст үчүн оң жактан аралыктын кошулушу */
}

.float-right {
  float: right; /* Элемент оң жакта плавает */
  margin-left: 10px; /* Текст үчүн сол жактан аралыктын кошулушу */
}

Өзгөчөлүктөрү:

Плавающий элемент стандарттык агымдан чыгат, бирок ал көршү элементтердин жана тексттин жайгашуусуна таасир этет.
Плавающий элементтин ата-энеси "схлопнуться" мүмкүн, анткени плавающие балдар анын бийиктигине таасир этпейт. Бул көйгөйдү чечүү үчүн clear ыкмасын же башка ыкмаларды колдонушат, мисалы, overflow: hidden же Flexbox/Grid.

clear касиети плавающие элементтердин кайсы тарапта болбошу керектигин көрсөтүүгө мүмкүндүк берет:

.clear-left {
  clear: left; /* Элемент сол жакта плаваган элементтерден кийинки жайгашат */
}

.clear-right {
  clear: right; /* Элемент оң жакта плаваган элементтерден кийинки жайгашат */
}

.clear-both {
  clear: both; /* Элемент бардык плавающие элементтерден кийинки жайгашат */
}

Плавающие элементтер тарыхта көп тилдүү макеттерди түзүү үчүн колдонулуп келген, бирок азыр бул максатта Flexbox же CSS Grid көбүрөөк колдонулат, анткени алардын ийкемдүүлүгү жана алдын ала көрүлүшү жакшы. Бирок float дагы эле текстти сүрөттөр менен же башка элементтер менен айлантуу үчүн пайдалуу.

CSSте кантип жүгүрүүчү элементтер (float) болот?