Ինչպես են աշխատում CSS-ում թռչող տարրերը (floats)?

CSS-ում թռչող տարրերը (float) դուրս են գալիս նորմալ փաստաթղթի հոսքից և շարժվում նշված ուղղությամբ (ձախ կամ աջ) իրենց պարունակող բլոկի ներսում: Կողմնային inline տարրերը և բովանդակությունը սկսում են շրջապատել թռչող տարրին հակառակ կողմից:

float-ի հիմնական հատկությունները՝

• left: Տարրը տեղափոխվում է ձախ:
• right: Տարրը տեղափոխվում է աջ:
• none: Տարրը մնում է նորմալ հոսքում (նույնական արժեք):
• inherit: ժառանգում է արժեքը ծնողից:

Նախկինում հաճախ օգտագործվում էր բազմակողմանի դասավորություններ ստեղծելու համար՝ մինչև Flexbox և Grid հայտնվելը:

Աշխատանքի առանձնահատկություններ՝

• Թռչող տարրը դառնում է բլոկ, անկախ սկզբնական ցուցադրման տեսակից:
• Ծնող կոնտեյների բարձրությունը հաշվի չի առնում թռչող տարրերի բարձրությունը, ինչը կարող է հանգեցնել կոնտեյների "փլուզման":

Մաքրման մեթոդներ՝

• clear հատկությունը՝ կիրառվում է տարրին, որպեսզի կանխի նրա շրջապատումը թռչող տարրերով:

  /* Տարրը չի շրջապատվի երկու կողմերից թռչող տարրերով */
  .clear-both {
    clear: both;
  }
  

• Clearfix տեխնիկա՝ ավելացնելով :after псևդո-տարր- ից ծնող կոնտեյների հետ՝ clear: both և այլ ոճերով՝ կանխելու համար փլուզումը:

  /* դասական clearfix */
  .clearfix::after {
    content: "";
    display: table; /* կամ "block" */
    clear: both;
  }
  

Չնայած ավելի ժամանակակից մեթոդների հայտնվելուն, float դեռ կարող է օգտակար լինել փոքր տարրերի համար՝ օրինակ՝ պատկեր տեղադրելու տեքստի ներսում։