CSS Float: апісанне, ўласцівасці

Float - адна з базавых функцый мовы CSS (Cascading Style Sheets - фарматаванне каскадных табліц). Гэтая мова існуе з 1996 года і да гэтага часу працягвае развівацца. На дадзены момант распрацоўшчыкі выкарыстоўваюць ўжо трэцюю версію CSS. З дапамогай мовы праграмавання CSS магчыма стварыць цалкам прыгожы і прыемны сайт, які не будзе здавацца састарэлым або нязручным для карыстальніка, нават калі зусім не прымяняць JavaScript. Сучасныя магчымасці трэцяй версіі дазваляюць гэта зрабіць.

Таксама распрацоўшчыкі могуць выкарыстоўваць больш зручныя варыянты фарматавання, такія як Flexbox або Position для змены месца элемента на сайце, але аб усім па парадку. Для пачатку варта разабрацца з перавагамі і недахопамі ўласцівасці Float.

CSS Float - навошта ён патрэбны?

Float - ўласцівасць для пазіцыянавання элементаў. Кожны дзень яго можна назіраць на старонках газет і часопісаў, гледзячы на малюнкі і тэкст, які вельмі акуратна абцякае іх вакол. и CSS при использовании функции Float должно произойти то же самое. У свеце кодаў HTML і CSS пры выкарыстанні функцыі Float павінна адбыцца тое ж самае. Але варта памятаць, што рэдагаванне малюнкаў далёка не заўсёды з'яўляецца асноўным прызначэннем гэтай функцыі. Яе можна выкарыстоўваць для стварэння папулярнага размяшчэння элементаў сайта ў дзве, тры, чатыры калонкі. На самай справе, ўласцівасць Float CSS ўжываецца практычна да любога html-элементу. Ведаючы асновы рэдагавання размяшчэння элементаў з дапамогай функцыі Float, а затым і Property, стварыць любы дызайн сайта не складзе адмысловай працы.

Спецыяльныя праграмы вярстальшчыкі могуць часам не заўважаць малюнкаў, а ісці па-над імі. Досыць падобныя рэчы адбываюцца і ў вэб-дызайне, толькі з тым улікам, што тэкст, замест таго каб залазіць на карцінку, адлюстроўваецца (пры няправільным ужыванні ўласцівасці Float) побач з ёй або пад ёй, але заўсёды не там, дзе трэба распрацоўніку.

CSS Float апісанне ўласцівасці

У рэчаіснасці ўменне карыстацца уласцівасцю Float з'яўляецца вельмі добрым тузом у рукаве для любога вэб-дызайнера. Але, на жаль, недастатковае разуменне таго, як працуе гэтая функцыя, можа прывесці да сутыкненняў элементаў сайта і іншым засмучанаю падобнага роду. Раней таксама падобныя сітуацыі адбываліся з-за багаў ў браўзэрах. Зараз сакрэт таго, як правільна выкарыстоўваць ўласцівасць Float, будзе раскрыты, і ніякіх праблем з гэтым узнікнуць больш не павінна.

У ўласцівасці Float ёсць чатыры значэння:

• Float: inherit;
• Float: right;
• Float: left;
• Float: none;

Для тых, хто ведае англійская, значэнні параметраў ўласцівасці Float павінны быць зразумелыя. Але для тых, хто не ведае, можна прывесці невялікае тлумачэнне. Параметр: left; перамяшчае цела элемента ў самы крайні левы кут бацькоўскага элемента. Тое ж адбываецца (толькі ў іншы бок) пры bcgjkmpjdfybb параметру: right; . Значэнне: inherit; загадвае элементу ўзяць на сябе тыя ж налады, што і ў бацькоўскага. Такія элементы яшчэ называюцца даччынымі, так як яны размяшчаюцца непасрэдна ўнутры бацькоўскага ў html-кодзе. А ўласцівасць: none; дазваляе элементу не парушаць звычайнага плыні дакумента, яно ўсталёўваецца па змаўчанні для ўсіх частак кода.

Як Float працуе?

Ўласцівасць Float CSS працуе дастаткова проста. Усё, што было апісана вышэй, можна зрабіць без адмысловай працы. Далей усё будзе так жа проста. Але перш чым працягнуць вывучэнне ўласцівасці Float, варта трохі разабрацца ў тэорыі. Кожны элемент вэб-сайта з'яўляецца блокам. Лёгка пераканацца ў гэтым, адкрыўшы кансоль у Google Chrome націскам Ctrl + Shift + J. Тэкст, загаловак, карцінка, спасылкі і ўсе астатнія складовыя часткі сайта будуць адлюстроўвацца блокамі, проста розных памераў. Першапачаткова ўсе гэтыя блокі ідуць адзін за адным. Як відаць на прыкладзе ніжэй, радкі кода ідуць адзін за адным, таму і адлюстроўвацца яны будуць строга адзін за адным.

Гэта называецца normal flow (нармальнае працягу). Пры такім плыні усе блокі кладуцца адзін на аднаго (не перасякаючы цела элементаў) вертыкальна. Першапачаткова ўсе змесціва вэб-старонкі размешчана менавіта такім чынам. Але пры выкарыстанні, напрыклад, ўласцівасці мовы CSS Float Left, элемент пакідае сваё натуральнае становішча на старонцы і ссоўваецца ў крайняе левае становішча. Такія паводзіны непазбежна прыводзіць да сутыкнення з тымі элементамі, якія так і засталіся ў нармальным плыні.

Іншымі словамі, элементы замест таго, каб размяшчацца вертыкальна, цяпер знаходзяцца побач адзін з адным. Калі бацька мае досыць месцы, каб ён змог размясціць два даччыных ўнутры сябе, то сутыкнення не адбываецца, а калі не, то накладанне аднаго аб'екта на іншы непазбежна. Гэта надзвычай важна запомніць для разумення працы ўласцівасці Float CSS.

Функцыя Clear для вырашэння праблем

У функцыі Float ёсць сардэчны сябар - Clear. Разам яны - не разлі вада. Абедзве гэтыя функцыі дапаўняюць адзін аднаго і робяць распрацоўніка шчаслівым. Як было паказана вышэй, суседнія элементы выходзяць са свайго нармальнага плыні і таксама пачынаюць "плаваць", як і элемент, да якога ўжылі ўласцівасць Float (напрыклад, CSS Float Top). У выніку замест аднаго плавае элемента атрымліваюцца два, прычым зусім не ў тым месцы, дзе іх меў намер размясціць распрацоўшчык. З гэтага моманту як раз і пачынаюцца ўсе праблемы.

У функцыі Clear ёсць пяць значэнняў:

• : Left;
• : Right;
• : Both;
• : Inherit;
• none;

Па аналогіі можна зразумець, калі лепш за ўсё ўжыць функцыю Clear. Калі ў нас напісана радок у кодзе Float: right; (CSS-код маецца на ўвазе), то функцыя павінна быць Clear: right;. Тое ж самае пампуецца і ўласцівасці Float: left; дапаўняць яго будзе Clear: left; . Пры напісанні кода Clear: both; атрымаецца, што элемент, да якога прымяняецца гэтая функцыя, будзе знаходзіцца ніжэй элементаў, да якіх ужытая функцыя Float. Inherit бярэ налады бацькоўскі элемент, а none не ўносіць ніякіх зменаў у структуру сайта. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Калі зразумець, як працуюць функцыі Float і Clear, можна напісаць унікальны і незвычайны HTML і CSS Float-код, які зробіць ваш вэб-сайт адзіным у сваім родзе.

Выкарыстанне Float для стварэння калонак

Асабліва карысна ўласцівасць Float пры стварэнні калонак на сайце (або размяшчэнні кантэнту CSS Float па цэнтры вэб-старонкі). Менавіта такі код з'яўляецца самым практычным і зручным, таму варта разгледзець некалькі варыянтаў стварэння звыклага шаблону сайта, які складаецца з двух калонак. Для прыкладу возьмем стандартны вэб-сайт з кантэнтам злева, навігацыйнай панэллю (navigation bar) справа, загалоўкам і ніжні калантытула. Код будзе такім:

Зараз неабходна разабрацца, што ж тут напісана. Бацькоўскі элемент, у якім знаходзіцца асноўная частка html-кода, названы кантэйнерам (container). Ён дазваляе не даць элементам, да якіх ужытая функцыя Float, разбрестись ў розныя бакі. Калі б яго не было, то гэтыя элементы сплылі б да самых межаў браўзэра.

Затым, у кодзе ідуць #content і #navigation. Да гэтых элементаў прымяняецца функцыя Float. #content адпраўляецца налева, а #navigation ідзе направа. Гэта неабходна для стварэння сайта з двух калонак. Абавязкова трэба паказаць шырыню, каб аб'екты не наклаліся адзін на аднаго. Шырыню можна паказваць і ў працэнтах. Так нават зручней, чым у пікселях. Напрыклад, 45% для #content і 45% для #navigation, а астатнія 10% аддаць ўласцівасці margin.

Ўласцівасць Clear, якое знаходзіцца ў #footer, не дае ніжнім калантытула рушыць услед за #navigation і #content, а пакідае яго на тым жа самым месцы, на якім ён і знаходзіўся. Што можа адбыцца? калі не паказаць ўласцівасць Clear? У дадзеным кодзе #footer проста-проста пойдзе ўверх і апынецца пад #navigation. Гэта здарыцца з-за таго, што ў #navigation досыць месцы для размяшчэння яшчэ аднаго элемента. На гэтым наглядным прыкладзе вельмі добра відаць, як ўласцівасці Clear і Float дапаўняюць адзін аднаго.

Непрыемнасці, з якімі можна сутыкнуцца пры напісанні кода

Названыя вышэй прыклады досыць простыя. Але і з імі могуць узнікнуць праблемы. Наогул, на самай справе, мноства нечаканых непрыемнасцяў можа здарыцца з функцыяй Float. Як бы ні было дзіўна, але праблемы звычайна ўзнікаюць не з CSS, а з html-кодам. Месца, дзе размешчаны элемент з функцыяй Float ў html-кодзе, напрамую ўплывае на працу апошняй. Для таго каб пазбегнуць рознага роду цяжкасцяў, лепш за ўсё прытрымлівацца простага правіла - размяшчаць элементы з функцыяй Float першымі ў кодзе. Амаль заўсёды гэта працуе і зводзіць да мінімуму іх нечаканае паводзіны.

Сутыкненне элементаў

Сутыкненне адбываецца, калі бацькоўскі элемент, які змяшчае некалькі даччыных, не можа іх усё змясціць, і яны накладваюцца адзін на аднаго. Здараецца нават, што элементы могуць не адлюстроўвацца, а знікнуць з сайта. Гэта не баг браўзэра, а цалкам чаканае і належнае паводзіны элементаў з функцыяй Float.

З-за таго, што гэтыя элементы спачатку знаходзяцца ў нармальным плыні, а затым яно парушаецца уласцівасцю Float, браўзэр можа прыбраць іх са старонкі сайта. Аднак не варта адчайвацца, бо рашэнне простае і яснае - выкарыстоўваць ўласцівасць Cear. Магчыма, што з усіх спосабаў выхаду з гэтай праблемы прымяненне Clear з'яўляецца самым дзейсным.

Але праблему сутыкнення элементаў вэб-старонкі можна вырашыць і па-іншаму. Існуе яшчэ па меншай меры два спосабу:

• выкарыстанне функцыі Position;
• прымяненне Flexbox.

Функцыя Position часам з'яўляецца нядрэнны альтэрнатывай CSS Float. Па цэнтры вэб-старонкі ў выпадку ўжывання Position лепш за ўсё размясціць выявы. Калі правільна прымяніць значэння: absolute і: relative, то элементы ўстануць на свае месцы і не будуць накладвацца адзін на аднаго.

Разбор кода функцыі Position і Float

и CSS Float заменить на Position. Варта разабрацца падрабязней з тым, як у кодзе HTML і CSS Float замяніць на Position. На самой справе гэта вельмі проста. Дапусцім, ёсць элемент #container і #div.

#container {

width: 40%;

float: left;

margin: 10px;

}

#div {

width: 40%;

float: right;

margin: 10px;

}

#footer {

clear: both;

}

У дадзеным прыкладзе выкарыстанне ў другім кантэйнеры функцыі (CSS Div) Float дапаможа стварыць стандартны сайт з двух калонак. Ніколі не варта забываць аб функцыі Clear. Без яе атрымаецца толькі накладанне элементаў адзін на аднаго.

Такім чынам, як жа змяніць код CSS і Float так, каб выкарыстоўваць Postion? Вельмі проста:

#container {

width: 40%;

position: relative;

margin: 10px;

}

#div {

width: 40%;

position: relative;

margin: 10px;

}

У такім выпадку #container і #div прымуць патрэбнае распрацоўніку становішча ў бацькоўскай элеменце. Галоўнае? змясціць #div і #container ў адзін бацькоўскі элемент, які будзе адпавядаць іх памерах.

Flexbox - як гэтая функцыя дапаможа замяніць CSS Float?

Flexbox - самы прасунуты спосаб стварэння вэб-сайтаў на дадзены момант, таму гэтая функцыя не падтрымліваецца старымі версіямі браўзэраў. Гэты факт не варта скідаць з рахункаў, бо карыстальнікі з састарэлымі версіямі браўзэраў не змогуць пабачыць карэктную версію сайта.

Flexbox не з'яўляецца уласцівасцю, а асобным модулем. Таму flexbox падтрымлівае цэлы шэраг уласцівасцяў, якія працуюць толькі з ім. Да таго ж у функцыі display, якая мае тры параметру inline, block і inline-block ў flexbox застаецца толькі адна flex-flow.

Як працуе Flexbox?

Гэтая тэхналогія дапаможа распрацоўніку лёгка выраўнаваць элементы па гарызанталі і вертыкалі. Таксама Flexbox можа змяніць кірунак і парадак адлюстравання элементаў. У гэтай тэхналогіі існуе дзве восі: Main axis і Cross axis, вакол якіх і будуецца ўвесь Flexbox. Таксама ён прыбірае дзеянне функцый Float і Clear. Ён будуе сваю сістэму ў кодзе, у якой выкарыстоўвае уласцівыя толькі яму ўласцівасці, таму, на жаль, не атрымаецца прадубляваць у элементах іншыя ўласцівасці, такія як Float і Position. А гэта было б вельмі дарэчы, бо, як гаварылася вышэй, Flexbox працуе толькі ў новых версіях браўзэраў.

Варта памятаць, што ў канчатковым выніку Position, Flexbox і Float робяць адно і тое ж - ствараюць незвычайны і арыгінальны дызайн вашага сайта. Кожны варыянт з разгледжаных у артыкуле робіць гэта па-свойму і таму мае як перавагі, так і недахопы. Да таго ж бывае, што дзе-то выдатна падыдзе функцыя Float (напрыклад, у сайце з простай структурай), а дзе-то лепш выкарыстоўваць Position або Flexbox.

Double Margin Bug

Аднак часам, на жаль, у кожнага распрацоўніка ўзнікаюць праблемы, звязаныя няма з напісаным кодам, а з багамі ў нейкім канкрэтным выглядзе браўзэра. Напрыклад, у Internet Explorer існуе баг, які называецца Double Margin Bug. Ён памнажае параметр Margin на два, што прыводзіць да зрушэння элементаў сайта за межы браўзэра. Каб пазбегнуць гэтага, досыць паказаць параметр Margin ў працэнтах. Звычайна гэты баг адбываецца тады, калі значэнне ў ўласцівасці Margin і Float супадае.

#div {

float: left;

margin-left: 10px;

}

Такі код зрушыць элемент у Internet Explorer на 20 px налева. Можна змяніць код так:

#div {

float: left;

margin-left: 10%;

}

ці ж так,

#div {

float: left;

margin-right: 10px;

}

Абодва гэтыя варыянты вырашаць праблему зрушэння элементаў.

Багі браўзэра і некарэктнае адлюстраванне сайта

Варта памятаць, што Internet Explorer - не адзіны браўзэр, у якім могуць узнікаць багі. Старыя версіі Google Chrome і Mozilla таксама некарэктна адлюстроўваюць некаторыя элементы сучасных вэб-сайтаў. Для кожнага з гэтых багаў можна знайсці рашэнне. У цэлым хочацца адзначыць, што выкарыстанне Float створыць арыгінальны і прывабны дызайн сайта. Разуменне асноў і прынцыпаў працы гэтага ўласцівасці дазволіць пазбегнуць памылак і палегчыць жыццё любому распрацоўніку.