Clearfix на css

Відео: Уроки по CSS / CSS3. Частина 12. Плаваючі елементи (float) і clearfix

Багато верстальники чули про clearfix на CSS. Clearfix - метод скасування дії float без зміни структури HTML-документа. Даний метод деякими верстальниками вельми активно використовується, тому я вирішив про нього Вам розповісти в даній статті.

Давайте розберемо такий приклад:

id="Article"gt; 
src="Img.jpg"alt=""style="float: left-"/ Gt; 
 текст статті 
 
 підвал сайту

Все б нічого, але блок "підвал сайту"Виявився той же праворуч від картинки, а не під нею. Яке рішення цієї проблеми? Абсолютно очевидно, що треба просто додати ще один блок, який скасовує дію float:

Відео: CSS Floats & Clearfix

id="Article"gt; 
src="Img.jpg"alt=""style="float: left-"/ Gt; 
 текст статті 
style="clear: both-"gt; 
 
 
 підвал сайту

Тепер все встає на свої місця, однак, ми змінили структуру HTML-коду, додавши в нього незрозумілий порожній блок. Так ось clearfix дозволяє уникнути цього. Ніякого блоку додавати не потрібно, а достатньо написати в CSS-коді так:

Відео: clearfix і overflow | Використання

#article: after { 
 content:""- 
 clear: both- 
 display: table- 
}

псевдоелемент after дозволяє вивести якийсь контент після вмісту елемента. Цей контент задається у властивості content. Так само цей контент робиться табличним елементом і у нього скасовується дія float.

Цей спосіб працює у всіх сучасних браузерах, тому він є кросбраузерності.

Від себе додам, що я звик додавати блок з clear: both- в HTML, але познайомити Вас з clearfix в CSS я теж вважав за потрібне.

Відео: Уроки по CSS CSS3 Частина 12 Плаваючі елементи float і clearfix

А тим, у кого дана стаття викликала труднощі, рекомендую пройти цей курс. Після цього курсу Ви без зусиль зможете зверстати сторінку будь-якої складності.

Поділися в соціальних мережах:

Схожі