Ինչպես են աշխատում 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։