როგორ მუშაობენ CSS-ში ცურვის ელემენტები (floats)?

CSS-ში ფრიქციული ელემენტები (float) გამოდიან ნორმალური დოკუმენტის ნაკადიდან და გადაადგილდებიან მითითებულ მიმართულებაზე (მარცხნივ ან მარჯვნივ) თავიანთი კონტეინერის შიგნით. მეზობელი inline ელემენტები და შინაარსი იწყებენ ფრიქციული ელემენტის გარშემორტყმას საპირისპირო მხარეს.

float-ის ძირითადი თვისებები:

• left: ელემენტი გადადის მარცხნივ.
• right: ელემენტი გადადის მარჯვნივ.
• none: ელემენტი რჩება ნორმალურ ნაკადში (ნაგულისხმევი მნიშვნელობა).
• inherit: მემკვიდრეობით იღებს მნიშვნელობას მშობელიდან.

იგი ხშირად გამოიყენებოდა მრავალსვეტიანი განლაგებების შესაქმნელად, სანამ გამოჩნდებოდა Flexbox და Grid.

მოქმედების მახასიათებლები:

• ფრიქციული ელემენტი ხდება ბლოკი, მიუხედავად თავდაპირველი ჩვენების ტიპისა.
• მშობლის კონტეინერის სიმაღლე არ ითვალისწინებს ფრიქციული ელემენტის სიმაღლეს, რაც შეიძლება გამოიწვიოს კონტეინერის "ჩაძირვა". ამ პრობლემის გადასაჭრელად გამოიყენება გაწმენდის მეთოდები.

გაწმენდის მეთოდები:

• clear თვისება: გამოიყენება ელემენტზე, რათა აიცილოს მისი გარშემორტყმა ფრიქციული ელემენტებით. მნიშვნელობები: left, right, both, none, inherit.

  /* ელემენტი არ იქნება გარშემორტყმული ფრიქციული ელემენტებით ორივე მხრიდან */
  .clear-both {
    clear: both;
  }
  

• Clearfix ტექნიკა: pseudo-ელემენტის დამატება მშობელ კონტეინერს :after-ით, clear: both და სხვა სტილებით, რათა თავიდან აიცილოს ჩაძირვა.

  /* კლასიკური clearfix */
  .clearfix::after {
    content: "";
    display: table; /* ან "block" */
    clear: both;
  }
  

მოდერნი განლაგების მეთოდების გამოჩენამდე, float ჯერ კიდევ შეიძლება იყოს სასარგებლო მცირე ელემენტებისთვის, მაგალითად, გამოსახულების განთავსებისთვის ტექსტში.