როგორ მუშაობენ 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.