Выкарыстанне CSS паплаўка ўласцівасці ў дызайн вэб-старонкі Макеты
Ўласцівасць CSS з'яўляецца вельмі важным уласцівасцю для разметкі. Гэта дазваляе размясціць вэб-старонак канструкцыі менавіта так, як вы хочаце, каб адлюстраваць, але для таго, каб выкарыстоўваць яго, вы павінны зразумець, як гэта працуе.
У табліцы стыляў, ўласцівасць CSS паплавок выглядае наступным чынам:
.right {паплавок: права; }
Гэта кажа браўзэру, што ўсе з класам «права» павінна быць паплыў направа.
Вы б прысвоіць гэта наступным чынам:
клас = "права" />
Што Вы можаце Паплавок з CSS паплаўком уласнасці?
Вы не можаце плаваць кожны элемент на вэб-старонцы. Вы можаце толькі плаваць блокавыя элементы. Гэтыя элементы, якія займаюць блок прасторы на старонцы, як выявы (), пункты (), аддзелы (), а таксама спісы ().
Іншыя элементы , якія ўплываюць на тэкст, але не ствараюць скрыню на старонцы называюцца ўбудаванымі элементамі і не могуць быць размешчаныя. Гэтыя элементы, як прамежак (), парывы радкоў (), моцны акцэнт () ці курсіў ().
Куды яны плывуць?
Вы можаце плаваць элементы направа або налева. Любы элемент, які ідзе за плавае элемент будзе цячы вакол плавае элемента на другім баку.
Напрыклад, калі я плавае малюнак злева, любы тэкст або іншыя элементы, пасля яго будзе цячы вакол яго направа. І калі я плавае малюнак направа, любы тэкст або іншыя элементы, пасля яго будзе цячы вакол яго налева. Малюнак, якое змяшчаецца ў блок тэксту без якога-небудзь стылю флоат нанесеным на яго будзе адлюстроўвацца, аднак браўзэр настроены для прагляду малюнкаў.
Гэта, як правіла, з першым радком наступнага тэксту, які адлюстроўваецца ў ніжняй частцы малюнка.
Як далёка яны плывуць?
Элемент , які быў плавалі будзе рухацца , як далёка налева або направа ад элемента кантэйнера , як ён можа. Гэта прыводзіць да некалькіх розных сітуацыях у залежнасці ад таго, як напісаны код.
Для гэтых прыкладаў я завіс невялікі DIV элемент налева:
- Калі плавае элемент не мае загадзя пэўную шырыню, яна будзе займаць столькі месца па гарызанталі ў адпаведнасці з патрабаваннямі і даступныя, незалежна ад паплаўка. Звярніце ўвагу: некаторыя браўзэры спрабуюць размяшчаць элементы побач плавалі элементы, калі шырыня не вызначана, як правіла, даючы NON-плаваў элемент толькі невялікая колькасць прасторы. Такім чынам , вы заўсёды павінны вызначыць шырыню на плаваюць элементаў.
- Калі элемент кантэйнера з'яўляецца HTML элемент, то плавалі DIV будзе сядзець на левым краі старонкі.
- Калі элемент кантэйнера сам ўтрымліваецца нешта яшчэ, плавалі DIV будзе сядзець на левым краі кантэйнера.
- Вы можаце укладваць плаваў элементы, і гэта можа прывесці да паплаўка, які сканчаецца ў дзіўным месцы. Напрыклад, гэты паплавок левы плавалі DIV ўнутры правага плавалі DIV.
- Плаваў элементы будуць сядзець побач адзін з адным, калі ёсць месца ў кантэйнеры. Так, напрыклад, гэты кантэйнер мае тры шырокія 100px DIV элементаў плавалі ў шырокім кантэйнеры 400px.
Вы нават можаце выкарыстоўваць паплаўкі для стварэння макета фота галерэі. Вы змяшчаеце кожную мініяцюру (яна працуе лепш за ўсё, калі яны ўсё ж памеру) у DIV з подпісам і паплаўком элементаў DIV ў кантэйнеры.
Незалежна ад таго, наколькі шырокі акно браўзэра, мініяцюры будуць выбудоўвацца раўнамерна.
выключэнне Float
Пасля таго, як вы ведаеце, як атрымаць элемент плаваць, гэта важна ведаць, як адключыць паплавок. Вы выключыце паплавок з CSS ясным уласнасці. Вы можаце ачысціць пакінутыя паплаўкі, паплаўкі правых або абодва:
ясна: левы;
ясна: права;
ясна: тое і іншае;
Любы элемент , які вы ўсталявалі дакладнае ўласцівасць для ніжэй з'явіцца элемент , які плаваў у гэтым кірунку. Напрыклад, у гэтым прыкладзе першыя два абзаца тэксту не выдаляюцца, а трэці.
Гульня з выразным значэннем розных элементаў у дакументах для атрымання розных эфектаў макета.
Адзін з самых цікавых макетаў размешчаных серыі малюнкаў ўніз па правай ці левай калонцы побач з пунктамі тэксту. Нават калі тэкст не дастаткова доўга, каб пракручваць міма малюнка, вы можаце выкарыстоўваць ясна, на ўсе выявы, каб пераканацца, што яны з'яўляюцца ў калонцы, а не побач з папярэднім.
HTML (паўтарыць гэты абзац):
DUIs AuTe irure Dolor СЕПГ зрабіць eiusmod Tempor incididunt ў reprehenderit ў voluptate. Cupidatat ня proident, ет лабараў і інш Dolore Магна aliqua.
CSS (плаваць выявы налева):
img.float {паплавок: левы;
ясна: левы;
Маржа: 5px;
}
А справа:
img.float {паплавок: права;
ясна: права;
Маржа: 5px;
}
Выкарыстанне паплаўкоў для макета
Пасля таго, як вы разумееце, як працуе ўласцівасць з якая плавае кропкай, вы можаце пачаць выкарыстоўваць яго, каб выкласці свае вэб-старонкі. Гэтыя крокі я зрабіць, каб стварыць плаваў вэб-старонку:
- Дызайн макета (на паперы ці ў графічным інструменце або ў маёй галаве).
- Вызначце, дзе падраздзялення старонак будзе.
- Вызначэнне шырыні розных кантэйнераў і элементаў ўнутры іх.
- Паплавок ўсё. Нават самы вонкавы элемент кантэйнера перамяшчаецца налева, так што я ведаю, дзе ён будзе знаходзіцца ў адносінах да Просм.об порту.
Да таго часу, як вы ведаеце, шырыню (працэнты з'яўляюцца штрафам) вашых раздзелаў макета, вы можаце выкарыстоўваць ўласцівасць паплаўка змясціць іх туды, дзе яны належаць на гэтай старонцы. І добрая рэч, вам не прыйдзецца турбавацца, як шмат пра мадэль скрынкі быць рознай для Internet Explorer або Firefox.