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

მოსაკეცი მეთოდები:

• clear: left; — აიკრძალება მარცხიდან მოყოლა. გამოიყენება, როდესაც ელემენტი არ უნდა იყოს მარცხენა მოყოლილი ელემენტების გვერდით.
• clear: right; — აიკრძალება მარჯვნიდან მოყოლა. გამოიყენება, როდესაც ელემენტი არ უნდა იყოს მარჯვენა მოყოლილი ელემენტების გვერდით.
• clear: both; — აიკრძალება ორივე მხრიდან მოყოლა. გამოიყენება, როდესაც ელემენტი არ უნდა იყოს რომელიმე მოყოლილი ელემენტის გვერდით. ეს ყველაზე გავრცელებული ვარიანტია.
• clear: none; (ნაგულისხმევი მნიშვნელობა) — ნება დართვა მოყოლას.

გამოყენება:

• მშობელი კონტეინერის "ჩაშლას" თავიდან აცილება: თუ მშობლის ყველა შვილი ელემენტი მოყოლილია (აქვს float), მშობელი კონტეინერი კარგავს სიმაღლეს და ჩაშლას. clear: both; ელემენტის დამატება მშობლის შიგნით მოყოლილი ელემენტების შემდეგ ან псევდო-ელემენტის ::after გამოყენება ამ პრობლემას აგვარებს.
• სწორი განლაგებისათვის მოყოლილი ელემენტების შემდეგ: თუ ჩვეულებრივი (მოყოლილი არა) ელემენტები უნდა განთავსდეს მოყოლილების ქვეშ და არა გვერდით.
• სათითაოდ "ხაზების" ან "სარჩევის" შექმნა მოყოლილ განლაგებებში: როდესაც float-ით განლაგებული ელემენტები უნდა განთავსდეს რამდენიმე ხაზზე, clear გამოიყენება ახალი ხაზის დასაწყებად.

Pseudo-ელემენტის ::after გამოყენების მაგალითი დასუფთავებისთვის:

.clearfix::after {
  content: ""; /* მნიშვნელოვანია псევდო-ელემენტის გამოსაჩენად */
  display: table; /* ან block */
  clear: both; /* მთავარი თვისება დასუფთავებისთვის */
}

ეს clearfix კლასი შემდეგ გამოიყენება მშობელ ელემენტზე, რომელიც შეიცავს მოყოლილ შვილეულ ელემენტებს.