CSS Макет - clear та clearfix
Властивість clear
Властивість clear визначає, які елементи можуть плавати поруч із очищеним елементом і з якого боку.
Властивість clear може мати одне з наступних значень:
none- допускає плаваючи елементи з обох боків. Це за замовчуваннямleft- з лівого боку заборонені плаваючи елементиright- з правого боку заборонені плаваючи елементиboth- плаваючи елементи заборонені з лівого і з правого бокуinherit- елемент наслідує clear значення свого предка
Найбільш розповсюджений спосіб використання властивості clear - після того, як ви застосували властивість float для елемента.
При очищенні float ви маєте співставити clear із float: якщо елемент переміщується вліво, ви маєте очистити його. Ваш float елемент буде продовжувати плавати, але clear-елемент з’явиться під ним на вебсторінці.
В наступному прикладі очищується float зліва. Це означає, що з лівого боку (від div) не допускаються плаваючи елементи:
Хак clearfix
Якщо елемент вище, ніж елемент, що його містить, має float, він "вийде за межі" свого контейнера:
Без Clearfix
Із Clearfix
Ми можемо додати overflow: auto; до елементу, що містить, щоб розв’язати цю проблему:
overflow: auto clearfix працює добре, поки ви можете контролювати свої поля та відступи (інакше ви можете побачити смуги прокрутки). Однак новий сучасний спосіб clearfix-хак більш безпечний, і наступний код використовується для більшості вебсторінок:
Ви дізнаєтесь більше про псевдоелемент ::after в наступному розділі CSS Підручника на нашому сайті W3Schools українською.
