Прымяненне правілы CSS clear: проста і зручна

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

Папулярныя раней ідэі блокавай, таблічнай, гумавай, адаптыўнай (і іншых варыянтаў) вёрсткі сышлі ў мінулае. У сапраўдным інфармацыя павінна проста адлюстроўвацца максімальна даступна, якасна і аднолькава на любой прыладзе.

Простыя патрабаванні да прадастаўлення інфармацыі

Чалавек вядзе дыялог словамі, і яго разумеюць. Але ён можа выкарыстоўваць наглядны матэрыял і ўдакладняць сказанае жэстамі, малюнкамі, тэрмінамі ці іншым чынам акцэнтаваць увагу слухача (спажыўца). У выніку ён хутчэй дасягае мэты.

Сайт абавязаны прадастаўляць інфармацыю аналагічна, пры гэтым не павінна узнікаць ніякіх дадатковых патрабаванняў да кадавання на ўзроўні HTML, CSS, JavaScript або PHP, у прыватнасці. Вынік павінен дасягаць мэты і падавацца як на персанальным кампутары, так і на любым іншым мабільным або стацыянарным девайсе.

Мовы гіпертэксту выкарыстоўваюцца не толькі браўзэрамі, але і іншымі інструментальнымі сродкамі. Прадастаўленне інфармацыі павінна нівеліраваць ўсе наяўныя адрозненні.

Сродкі, якія прадстаўляюцца CSS

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

У прыватнасці, правілы float і clear могуць быць ужытыя ў тэгах HTML і апісаннях CSS і не запатрабуюць ніякіх дадатковых выдаткаў, а эфект будзе належным. Правіла CSS clear, будучы выкарыстаных у элеменце, дазваляе яму размясціцца дакладна, па-за залежнасці ад таго, які памер у вобласці адлюстравання і на якім менавіта девайсе гэты працэс адбываецца.

CSS не адрозніваецца выдасканаленасцю канструкцый і імкнецца да максімальна даступнай прастаце. Выкарыстоўваючы ў элеменце правіла float: left або float: right, можна прыціснуць яго да той ці іншай баку абцякаючага яго блока, а наступным элементам з правілам CSS - clear: both - размясціць інфармацыю вакол.

Варыянты выкарыстання правілы CSS clear

Магчымыя тры значэння гэтага правіла:

• left - ня абгарнуць вакол злева;
• right - ня абгарнуць вакол справа;
• both - ня абгарнуць вакол з абодвух бакоў.

Можна выкарыстаць таксама значэння none і inherit для правілы CSS clear, што па сутнасці не адрозніваецца ад прадстаўляемага функцыяналу: папярэдні элемент (або элементы) будуць пазбаўленыя обцяканьне злева, справа ці з абодвух бакоў. Фактычна гэта пераклад радка. Усе наступныя элементы апынуцца ў наступным інфармацыйным блоку. Якая інфармацыя будзе выведзена да элемента з правілам CSS clear - вызначае распрацоўшчык. Абсалютна размешчаны элементы фармуюцца на старонцы ў месцы, вызначаным iх ўласцівасцямі.

Фактычна, правіла CSS clear дазваляе структураваць (групаваць) інфармацыйныя элементы. Прылада адлюстроўвае інфармацыю агульным патокам, а выявіўшы ў тым ці іншым элеменце правіла clear, выводзіць яго змесціва адпаведным чынам.

практыка прымянення

Як звычайна здаралася і ў іншых тэхналогіях, апісваная вёрстка прайшла мноства этапаў і ў канчатковым выніку падзялілася на дзве вялікія катэгорыі:

• магчымасць зрабіць прыгожа і эфектыўна (але, магчыма, доўга);
• хутка і даступна.

Кожны распрацоўшчык інтэрпрэтуе свае словы па-свойму. Некаторыя засталіся верныя тэрміналогіі «адаптыўная вёрстка». Іншыя кажуць, што робяць гумовыя сайты. Трэція пераконваюць заказчыка ў неабходнасці блокавай або таблічнай вёрсткі ... Ня так важна, як называць працэс, інструмент ці іншы метад дасягненням выніку.

Заўсёды важныя толькі час распрацоўкі і вынік працы. У першым выпадку выкарыстанне правілы CSS clear наўрад ці будзе мець сэнс, роўна як і правіла float адпадзе за непатрэбнасцю. Фарміраваць старонку, размяшчаць інфармацыю і ўлічваць асаблівасці розных девайсов будзе мудрагелісты алгарытм на JavaScript або камбінацыя стыляў CSS, цесна завязаная з дзівамі HTML.

У другім выпадку, дзякуючы правілах float і clear, CSS-апісанне дазваляе проста сфармаваць паток элементаў старонкі. Прымальны вынік будзе дасягнуты хутка і эфектыўна.