Ի՞նչ են 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 դեռ օգտակար է տեքստի շրջապատման համար՝ պատկերների կամ այլ տարրերի շուրջ։