Позиционирането на елементите в една HTML страница винаги е пораждало множество спорове, относно начина на изпълнение на тази задача. Има много начина да бъде реализирано и аз в тази тема няма да се спирам над това кой е по-добър а просто ще се спра позициониране с промяна на нормалната подредба на елементите или т.н. “float”.
Какво предстой да прочетете?
Какво точно представлява “float”.
Допълнителни тънкости свързани с този тип позициониране.
Как да върнем естествената подредба на страницата.
Какво представлява “float”?
“Float” променя нормалната подредба на страницата, от елемента на който е приложен и за всички тагове, който са след него. Като може да позиционираме с лява наредба(float: left) или с дясна наредба(float: right). В първия случай елементите ще се наредят един до друг като първия ще е в ляво и всички други след него, при float: right e обратното. Могат да се използват и комбинирано, ако единия елемент е с „float: left“ а следващия с “float: right”, първия ще застане в ляво, а втория в дясно. Това е много полезно и разкрива едно от основните предимства на този тип позициониране – при промяна на размерите на браузъра тази наредба ще се запази.
Допълнителни тънкости свързани с този тип позициониране.
Както казах вече, когато зададем „float“ на даден елемент, той не се прилага само за съответния елемент а също така и за всички останали елементи след него. Нещо интересно в случая е, че елемента на който сме float-нали става блоков, или ако трябва да бъда напълно точен inline-block, а всички елементи след него стават inline. Това може да е желан ефект, но в повечето случай води до объркване. Друго важно което не може да не споменем е, че винаги трябва да връщаме нормалната подредба на страницата или казано по друг начин да зачистваме float-овете. В противен случай, контейнера в който сме разположили елементите, няма да може да ги обхване и да заеме точната си позиция(Това лесно може да се види в firebug – като флоатнем няколко елемента и после посочим „body“,което представлява техния контейнер, ако не сме ги вложили в друг елемент, ще забележим, че „body“ тага се е свил и всички елементи са разположени извън него). Има и други причини, които правят връщането на нормалната наредба на страницата задължително.
Как да върнем естествената подредба на страницата.
Най-добрия начин е да направим един css клас clearFloats, който изглежда по следния начин:
.clearFloats:after
{
content: „“,
display: block,
height: 0,
clear: both
}
След като вече сме направили този клас, може да го сложим на контейнера(елемента, който съдържа float-нати тагове) и по този начин ще бъде изчистен float-а за елементите в него. Възможно е да върнем нормалния поток в страницата като сложим празен „div“ с този клас, тогава от мястото на празния „div“ вече се премахва float-а. Аз лично препоръчвам да се използва първия подход а именно да се използват обгръщащите елементи за да бъдат зачиствани float-овете. Една забележка, която трябва да добавя е, че при по старите версии на IE този начин не работи съвсем коректно. Там има други техники за справяне с този проблем, но това е доста дълга тема и няма да се спирам на нея, казвам го за да се има предвид.
Промяната на нормалната подредба на страницата е много полезна техника, но трябва да бъдем внимателни, тъй като може да доведе до неочаквани последствия. Това разбира се не трябва да ви отказва от тази техника, която в началото може да ви се струва малко странна, но след като свикнете, подреждането на елементите по този начин се превръща в удоволствие.
Ivanov IT 