რომელიც იცით ნაკადის აკრძალვის (clearing) მეთოდები და სად გამოიყენება?

• clear: both;: ყველაზე გავრცელებული და საიმედო მეთოდი. გამოიყენება ელემენტზე, რომელიც უნდა იყოს ყველა წინამორბედი ცურვის ელემენტის ქვეშ. ეს შეიძლება იყოს ცალკე ცარიელი ელემენტი ან განლაგების ერთ-ერთი ელემენტი.
• ცარიელი ელემენტის დამატება clear: both;-ით: ზოგჯერ გამოიყენება სარწმუნო გასუფთავებისთვის, განსაკუთრებით რთული განლაგებების დროს. ეს არის ცარიელი div ან სხვა ბლოკური ელემენტი.
• Pseudo-ელემენტი :after-ით clear: both;: უფრო თანამედროვე მიდგომა. გამოიყენება ცურვის კონტეინერზე. ქმნის "ვირტუალურ" ელემენტს კონტეინერის ბოლოს, ამით აჩერებს შიგნით გადაფარვას.

/* pseudo-ელემენტის :after გამოყენების მაგალითი */
.container::after {
  content: ""; /* აუცილებელი თვისება pseudo-ელემენტებისთვის */
  display: table; /* ხშირად გამოიყენება უკეთესი თავსებადობისთვის */
  clear: both;
}

• overflow: hidden; ან overflow: auto;: გამოიყენება ცურვის ელემენტების კონტეინერზე. ქმნის ახალი ბლოკური კონტექსტს, რომელიც "წმენდს" შიგნით გადაფარვას. თუმცა, ეს შეიძლება გაჭრას შინაარსი ან შექმნას სლაიდერი, თუ შინაარსი გადის კონტეინერის საზღვრებს.
• ფორმატირების ბლოკური კონტექსტი (BFC): ყველა ზემოთ აღნიშნული მეთოდი, გარდა აშკარა ცარიელი ელემენტის, ასე თუ ისე ქმნის ახალ BFC-ს, რაც იწვევს გადაფარვის ნულს. BFC-ს შექმნის თვისებები:
  • float (ნულოვანი მნიშვნელობა)
  • overflow (მნიშვნელობა განსხვავებული visible-დან)
  • display: inline-block
  • position: absolute ან fixed
  • display: flow-root; (შესამჩნევად ახალი, აშკარად ქმნის BFC-ს)

ცხრილი შედარებისთვის:

მეთოდი	გამოყენება რა-ზე	როგორ ნულდება	პოტენციური პრობლემები
clear: both;	ელემენტი	აშკარა ნულგადაცემა	დამატებითი ელემენტი
ცარიელი ელემენტი + clear	ცარიელი ელემენტი	აშკარა ნულგადაცემა	დამატებითი ელემენტი
:after + clear	კონტეინერი	პსევდო-ელემენტი	უფრო რთული გასაგებად დამწყებთათვის
overflow: hidden/auto;	კონტეინერი	BFC შექმნა	გაჭრა/სლაიდერი
BFC შექმნა სხვა თვისებით	კონტეინერი	BFC შექმნა	გაურკვეველი, გვერდითი ეფექტები
display: flow-root;	კონტეინერი	აშკარა BFC შექმნა	არასაკმარისი მხარდაჭერა ძველ ბრაუზერებში

სად გამოიყენება:

• რათა ელემენტი, რომელიც შემდეგია ცურვის ელემენტების, დაიწყოს მათი ქვეშ.
• რათა კონტეინერი, რომელიც შეიცავს მხოლოდ ცურვის ელემენტებს, არ დაიშლება სიმაღლეზე.
• რთულ განლაგებებში დოკუმენტის ნაკადის კონტროლისთვის ცურვის ელემენტების გარშემო.