Правилно хак clearfix

Урок за правилна употреба хак clearfix.

Аз използвам хак clearfix на всички техните сайтове. Тя все още е известна като «Лесно Clearing Hack» - се използва за почистване на блок поток (DIV) без структурен код. Той е много ефективен в борбата с оформлението и браузъра несъответствия на, без да се налага да се смесват със структурата на презентацията. През последните няколко години, са взели под внимание редица полезни байта информация относно метода на «Лесно Clear». В тази статия, аз искам да се съберат всички тези уроци във връзка с разширената версия на CSS хак clearfix.

Използвайте празни места, вместо една точка, за да се предотврати промяната на разположение.

Тук е изпълнението на този хак, както е представено в един от най-оригиналните статии, описващи метода:

Обърнете внимание на реда, съдържащ съдържание имота: ".."; Открих, че точката, в кавички, има неприятна тенденция за нарушаване на променящите настаняване. При добавяне буквално точка след .clearfix единица (в рамките т.е. чрез .clearfix: след селектор) хак генерира грешка в някои браузъри. И не само за Internet Explorer - в зависимост от местоположението, дори и Firefox ще притъпи след пътуване: след - въз основа на псевдо-точка. Имате нужда от решение за тази бъркотия? Сменете точка на един прост пространство: съдържание: »«; - този трик се оказа доста успешна, аз сега използвам този имот в цялото му clearfix-ах.

Добавяне на нула собственост размер на шрифта, за да всичко гладко.

Друг странен несъвместимост види в clearfix-е - мястото се губи, когато имуществото на CSS размер на шрифта. намира в ustanavlivaetsya рана на нула:

Разбира се, това не може да е необходимо, когато се използва пространства, вместо характер "точка" (както е описано по-горе), но аз, честно казано, не се притеснявайте за това. Поглеждайки назад, мисля, че тя може да бъде да се направи това решение преди откриването на корекция пространство. Въпреки това, някои браузъри се справят пространство като текст, така че тя все още може да бъде полезен. Може би да, може би не - аз ще го хвърля на вас всички CSS-гуру.

Пазете се от дезинформация по отношение на този метод.

Не, аз не се опитвам да се умори съветите, предлагани в тази статия - ще видите, че те са напълно безвредни. Вместо това, аз говоря за погрешна информация срещат никъде другаде в интернет или дори и в печатна форма. Тук е представяне на clearfix хакери, описан в прекрасна книга от Джоузеф У. Лоури е «CSS Hack # 038; Филтри »:

Ох! Виждате ли проблема? В действителност, тук две потенциални проблеми .clearItem н Лоури е. Първи проблем: използването на остарели стойности в редово показване имот в средата на Декларация .clearItem:

както е разгледано в оригиналната статия, стойността трябва да е инлайн блок - Фиксирана поток за IE / Mac:

Вторият проблем: Г-н Лоури включват * HTML .clearItem * селектор в следния ред:

И сега всички заедно ...

Сложете всичко заедно и да се съчетаят тези уроци с оригиналния (вдясно) версия на «Лесно ясен метод», ще видим - напълно функционален решение хак clearfix:

и заснет! Надявам се, че имаше толкова много забавно, колкото и аз, докато написването на тази статия. ако не, аз се надявам, че в този кръг на "научените уроци" са някои полезна информация за повсеместна и полезна хак clearfix.

И най-накрая - този пост е посветен на CSS и не очаквам нищо добро, само най-тежките критици на идеите, изложени в този документ. - Хайде, всички вие луди CSS глава)))!

(Все още няма оценка)