CSS Float: описание, свойства

Float - една от основните функции на езика CSS (Cascading Style Sheets

Също така, разработчиците могат да използват по-удобни опции за форматиране, като Flexbox или Position, за да променят мястото на елемент на сайта, но за всичко в ред. Първо, трябва да разберете предимствата и недостатъците на собствеността на Float.

CSS Float - защо е необходимо?

Флотът е свойство за позициониране на елементи. Всеки ден може да се види на страниците на вестници и списания, гледайки снимки и текст, които много внимателно се обвиват около тях. В света на кодовете HTML и CSS, когато използвате функцията "Поплавък", трябва да станат същите. Но си струва да си припомним, че редактирането на изображения не винаги е основната цел на тази функция. Тя може да се използва за създаване на популярно оформление на елементи на сайта в две, три, четири колони. Всъщност, собствеността на Float CSS се прилага към почти всеки елемент html. Знаейки основите на редактирането на оформлението на елементите, използващи функцията "Поплавък", а след това "Имоти", създаването на уеб дизайн не е трудно.

Специалните програми за дизайнери по оформление понякога могат да пренебрегват образите, но да ги преодолеят. Достатъчно подобни неща се случват и се показва уеб дизайн, само с оглед на текста, а не да се качват върху снимката (ако се използва неправилно Float свойства) в непосредствена близост до него или под него, но не винаги, когато имате нужда от програмист.

Описание на характеристиката на CSS Float

Всъщност способността да се използва собствеността на Float е много добър ас в ръкава за всеки уеб дизайнер. Но, за съжаление, липсата на разбиране за това как функционира тази функция може да доведе до сблъсъци на елементи на обекта и други такива неудобства. Преди това подобни ситуации се появяват и поради бъгове в браузърите. Сега ще бъде разкрита тайната за това как правилно да се използва собствеността на Float и няма да възникнат проблеми с това.

Флотът има четири значения:

• Поплавък: наследете;
• Поплавък: вдясно;
• Поплавък: ляво;
• Поплавък: няма;

За тези, които познават английски, стойностите на параметрите на свойствата на Float трябва да са ясни. Но за тези, които не знаят, има малко обяснение. параметър : ляво; движи тялото на елемента в най-левия ъгъл на родителския елемент. Същото се случва (само в другата посока) с параметъра bcgjkmpjdfybb : вдясно;. стойност : inherit- нарежда елемента да поеме същите настройки като родителя. Такива елементи се наричат ​​още деца, тъй като те се намират директно вътре в родителския код в html-code. Имот : няма; Позволява на елемента да не нарушава нормалния поток на документа, той е зададен по подразбиране за всички части на кода.

Как работи Float?

Флотът CSS собственост работи много просто. Всичко, което е описано по-горе, може да се направи без много трудности. Тогава всичко ще бъде толкова просто. Но преди да продължите да изучавате свойствата на Float, струва си малко разбиране за теорията. Всеки елемент на уебсайт е блок. Лесно е да се види това, като отворите конзолата в Google Chrome, като натиснете Ctrl + Shift + J. текста, заглавието на изображения, линкове, както и всички други компоненти на обекта ще бъдат показани блокове, само на различни размери. Първоначално всички тези блокове преминават един след друг. Както можете да видите в примера по-долу, редовете на кода отиват едно след друго, така че те ще се показват стриктно едно след друго.

Това се нарича нормален поток. С този поток всички блокове лежат една върху друга (без да пресичат тялото на елементите). Първоначално цялото съдържание на уеб страницата се намира по този начин. Но когато използвате например свойствата на CSS Float Left, елементът напуска естествената си позиция на страницата и се премества в най-лявата позиция. Това поведение неизбежно води до сблъсък с онези елементи, които са останали в нормалния поток.

С други думи, елементите, вместо да се позиционират вертикално, сега са един до друг. Ако родителският елемент има достатъчно място, за да постави две деца в себе си, тогава няма сблъсък и ако не, тогава налагането на един обект върху друг е неизбежно. Това е изключително важно да се запомни за разбирането на работата на собствеността на Float CSS.

Ясна функция за решаване на проблеми

Флотът има сърдечен приятел - ясен. Заедно те - не разлейте вода. И двете функции се допълват и правят разработчика щастлив. Както бе споменато по-горе, съседни клетки излизат от нормалното си разбира се, а също и да започнат да "флоат" като елемент на което е била използвана Float собственост (например, CSS Float Top). В резултат на това вместо плаващ елемент получава две, а не на мястото, където те са предназначени да се организира на разработчика. От този момент нататък започват точно всички проблеми.

Функцията "Изчистване" има пет стойности:

• : ляво;
• : вдясно;
• : и двете;
• : наследете;
• няма;

По аналогия можете да разберете кога е най-добре да приложите функцията за изчистване. Ако в кода има ред Поплавък: вдясно; (Означава CSS), тогава функцията трябва да бъде Ясно: правилно-. Същото нещо се променя и свойства Поплавък: ляво; ще го допълни Ясно: вляво;. Когато пишете кода Ясно: и двете - се оказва, че елементът, към който се прилага тази функция, ще бъде под елементите, на които е приложена функцията "Поплавък". Наследяването отнема настройки от родителския елемент и никой не прави промени в структурата на сайта. Ако разбирате как функциите "Поплавък" и "Ясно" можете да напишете уникално и необичайно HTML и CSS Float-code, които ще направят уебсайта ви единствен по рода си.

Използване на Float за създаване на колони

Особено полезно е собствеността на флота при създаване на колони в даден сайт (или поставяне на съдържанието на CSS Float в центъра на уеб страница). Това е най-практичният и удобен код, така че помислете за няколко опции за създаване на персонализиран шаблон за сайт, състоящ се от две колони. Например вземете стандартен уебсайт със съдържание вляво, навигационна лента (навигационна лента) отдясно, заглавие и долен колонтитул. Кодът ще бъде:

Сега трябва да разберем какво е написано тук. Основният елемент, който съдържа основната част от html кода, се нарича контейнер. Той ви позволява да не давате елементи, на които се прилага функцията "Поплавък", да се скитате в различни посоки. Ако не беше така, тези елементи щяха да плуват до самите граници на браузъра.

След това в кода отидете #content и #navigation. Към тези елементи се прилага функцията "Поплавък". #content се изпраща вляво и #navigation отива надясно. Това е необходимо, за да създадете сайт с две колони. Трябва да посочите ширината, така че обектите да не се припокриват. Широчината може да се посочи в проценти. Така че дори по-удобно, отколкото в пиксели. Например 45% за #content и 45% за #navigation и дайте останалите 10% на собствеността на маржа.

Собственост на Ясен, който е в #footer, не следва долния #navigation и #content, но оставя на същото място, където е бил. Какво може да се случи? ако не посочите свойство Clear? В този код #footer просто ще се покачи и ще се покаже под #navigation. Това ще се случи поради факта, че # навигацията има достатъчно място, за да постави още един елемент. В този илюстративен пример можете ясно да видите как се допълват свойствата на Clear и Float.

Трудностите, които може да срещнете при писането на кода

Горните примери са доста прости. Но те също могат да имат проблеми. Като цяло, в действителност могат да възникнат много неочаквани проблеми с функцията "Поплавък". Колкото и да е странно, проблемите обикновено не възникват с CSS, а с HTML код. Мястото, където е разположен елементът с функцията "Поплавък" в html-кода, пряко засяга работата на последния. За да избегнете различни видове трудности, най-добре е да следвате просто правило - първо да поставите елементите с функцията "Поплавък" в кода. Тя почти винаги работи и минимизира неочакваното им поведение.

Сблъсък на елементи

Сблъсък възниква, когато родителски елемент, съдържащ няколко деца, не може да се побере в тях и те се наслагват един върху друг. То дори се случва, че елементите може да не се показват, но изчезват от сайта. Това не е бъг в браузъра, а очакваното и правилно поведение на елементите с функцията "Поплавък".

Поради факта, че тези елементи първоначално са в нормален поток и след това са нарушени от собствеността на Float, браузърът може да ги премахне от страницата на сайта. Въпреки това, не се отчайвайте, защото решението е просто и ясно - използвайте собствеността Cear. Възможно е Clear да е най-ефективният от всички начини за излизане от този проблем.

Но проблемът за сблъсък на елементи от уеб страница може да бъде решен по друг начин. Има поне два други начина:

• използване на функцията позиция;
• прилагане на Flexbox.

Функцията Позиция понякога е добра алтернатива на CSS Float. В центъра на уеб страницата, в случай на прилагане на позицията, най-добре е изображенията да бъдат подредени. Ако правилно приложите стойностите: абсолютно и: относително, тогава елементите ще попаднат на място и няма да се припокриват.

Разглеждането на функциите "Позиция" и "Поплавък"

Струва си да се разбере по-подробно кода HTML и заменете CSS Float с Position. Всъщност това е много просто. Да предположим, че има елемент #container и #div.

#container {

ширина: 40%;

плувка: ляво;

марж: 10px;

}

#div {

ширина: 40%;

float: right;

марж: 10px;

}

#footer {

ясно: и двете;

}

В този пример използването на функцията "Поплавък" (CSS Div) във втория контейнер ще ви помогне да създадете стандартен сайт с две колони. Никога не забравяйте за функцията за изчистване. Без нея можете само да насложете елементи един върху друг.

И така, как да променя CSS и Float кода за използване на Postion? Това е много просто:

#container {

ширина: 40%;

позиция: относителна;

марж: 10px;

}

#div {

ширина: 40%;

позиция: относителна;

марж: 10px;

}

В този случай #container и #div ще заемат позицията на програмиста в родителския елемент. Основното нещо? поставете #div и #container в един родителски елемент, който ще съответства на размерите им.

Flexbox - как тази функция помага за заместването на CSS Float?

Flexbox е най-усъвършенстваният начин за създаване на уеб сайтове в момента, така че тази функция не се поддържа от по-стари версии на браузърите. Този факт не трябва да се пренебрегва, тъй като потребителите с остарели версии на браузърите няма да могат да видят правилната версия на сайта.

Flexbox не е собственост, а отделен модул. Ето защо Flexbox поддържа редица свойства, които работят само с него. В допълнение, функцията на дисплея, която има три параметъра вградена, блокирана и вградена блокира в flexbox, има само един гъвкав поток.

Как функционира Flexbox?

Тази технология ще помогне на разработчика лесно да подравни елементи хоризонтално и вертикално. Също така, Flexbox може да промени посоката и реда на елементите. Тази технология има две оси: Главната ос и кръстосаната ос, около която е изградена цялата Flexbox. Той също така премахва действието на функциите Float и Clear. Той изгражда своята система в код, който използва свойства, присъщи единствено на него, затова за съжаление не можете да дублирате други свойства в елементи като "Поплавък" и "Позиция". И това би било много удобно, защото, както бе споменато по-горе, Flexbox работи само в нови версии на браузърите.

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

Двойна маргинална грешка

Понякога обаче, за съжаление, всеки разработчик има проблеми, които не са свързани с писмения код, а за грешки в някакъв вид браузър. Например в Internet Explorer има грешка, наречена "Double Margin Bug". Той умножава параметъра "Маржин" с два, което кара елементите на сайта да се преместят извън границите на браузъра. За да избегнете това, трябва само да зададете параметъра "Маржин" в проценти. Тази грешка обикновено възниква, когато стойността на собствеността "Маржин" и "Поплавък" е една и съща.

#div {

плувка: ляво;

margin-left: 10px;

}

Този код ще премести елемента в Internet Explorer 20 пиксела вляво. Можете да промените кода така:

#div {

плувка: ляво;

марж-ляво: 10%;

}

или така,

#div {

плувка: ляво;

margin-right: 10px;

}

И двата варианта ще разрешат проблема с изместването на елементите.

Браузъри на браузъра и неправилно показване на сайта

Струва си да се помни, че Internet Explorer не е единственият браузър, в който могат да възникнат бъгове. Старите версии на Google Chrome и Mozilla също неправилно показват някои елементи от съвременните уеб сайтове. За всеки от тези бъгове можете да намерите решение. Като цяло искам да отбележа, че използването на Float ще създаде оригинален и атрактивен дизайн на сайта. Разбирането на основите и принципите на тази собственост ще избегне грешки и ще улесни живота на всеки разработчик.