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

CSS Floats — դա դիրքավորման հատկություն է, որը տեղափոխում է տարրին իր կոնտեյների մեկ կողմը (left կամ right), թույլ տալով տեքստին և ինլայն տարրերին շրջանցել այն։ Տարրը հեռացվում է նորմալ փաստաթղթի հոսքից, բայց մնում է ձևավորման մաս։ Սկզբում այն օգտագործվում էր բազմակողմանի ձևանմուշներ և պատկերների շրջանցում տեքստով ստեղծելու համար, բայց այժմ հիմնականում կիրառվում է հատուկ խնդիրների լուծման համար՝ ավելի ճկուն և կանխատեսելի մեթոդների, ինչպիսիք են Flexbox և Grid։

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

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

Օրինակ օգտագործման համար՝

.image {
  float: left;
  margin-right: 15px; /* Միջակայք աջից շրջանցող տեքստից */
}

.text {
  /* Տեքստը շրջանցում է .image դասի տարրին */
}

float-ների հետ կապված խնդիրներ՝

• Հոսքից դուրս գալը (collapsing surrounding element): Ծնող տարրը, որը միայն ֆլոատվող տարրեր է պարունակում, կարող է ճեղքվել բարձրությամբ, քանի որ այդ տարրերը չեն հաշվի առնվում նրա նորմալ չափերում:
• Տարրերի խաչաձևում: Հաջորդող տարրերը կարող են խաչաձևել ֆլոատվող տարրին, եթե նրանց չափերը չեն հաշվի առնվում:

Հարցերի լուծում՝

• clear հատկությունը: Կարգավորում է տարրին, որը չի պետք շրջանցի ֆլոատվող տարրին։ Արժեքներ՝ left, right, both, none:
• clearfix տեխնիկա: Հատուկ դասի ավելացում ծնող տարրին կամ псևդոելեմենտ :after օգտագործելով՝ հարկադրաբար փակելու համար ծնողին:

.container::after {
  content: "";
  display: table; /* կամ block */
  clear: both;
}

• Արդիական մեթոդներ: Flexbox կամ CSS Grid օգտագործելով՝ բարդ ձևավորումներ ստեղծելու համար:

Չնայած float-ները չեն հանդիսանում հիմնական գործիքակազմը ժամանակակից վեբ ձևավորման մեջ, դրանց աշխատանքը հասկանալը կարևոր է հին կոդի աջակցման և հատուկ խնդիրների լուծման համար՝ օրինակ՝ պատկերների շրջանցում տեքստով։