Използване на CSS float Property за създаване на уеб страници
CSS собствеността е много важна собственост за оформлението. Тя ви позволява да позиционирате дизайна на уеб страниците точно както искате да се показват, но за да го използвате, трябва да разберете как работи.
В стилов лист имуществото на CSS float изглежда така:
.right {float: right; }
Това разкрива на браузъра, че всичко с класа на "дясно" трябва да бъде плавано надясно.
Ще го присвоите по следния начин:
class = "right" />
Какво можете да плавате с CSS float Property?
Не можете да плувате с всеки елемент на уеб страница. Можете да плавате само елементи на ниво блок . Това са елементите, които заемат пространство на страницата, като изображения (), параграфи (), разделения () и списъци ().
Други елементи, които засягат текста, но не създават кутийка на страницата, се наричат инлайн елементи и не могат да бъдат плаващи. Това са елементи като span (), line breaks (), силен акцент () или курсив ().
Къде плават?
Можете да плувате елементи отдясно или отляво. Всеки елемент, който следва плаващия елемент, ще тече около плаващия елемент от другата страна.
Например, ако плавам изображение вляво, всеки текст или други елементи, които го следват, ще преминат около него надясно. И ако изобразя изображение надясно, всеки текст или други елементи, които го следват, ще се заобикалят отляво. Изображение, което е поставено в блок от текстове, без да е приложен слой с плаващ флаг, ще покаже обаче, че браузърът е настроен да показва изображения.
Това обикновено е с първия ред от следващия текст, показан в долната част на изображението.
Колко далеч ще плават?
Елемент, който е бил плаващ, ще се движи колкото е възможно по-далече отляво или отдясно на контейнерния елемент. Това води до няколко различни ситуации в зависимост от начина, по който е написан вашият код.
За тези примери ще плавам малък елемент DIV вляво:
- Ако плаващия елемент няма предварително определена ширина, той ще заема колкото се може повече хоризонтално пространство, колкото е необходимо и налично, независимо от поплавъка. Забележка: Някои браузъри се опитват да поставят елементи до плаващи елементи, когато ширината не е дефинирана - обикновено дава на неплаващия елемент само малко пространство. Така че винаги трябва да дефинирате ширина върху плаващи елементи.
- Ако елементът на контейнера е HTML елемент, плаващата DIV ще седи в левия край на страницата.
- Ако самият контейнерен елемент се съдържа от нещо друго, плаващата DIV ще седи на лявото поле на контейнера.
- Можете да гнездите плаващи елементи и това може да доведе до изтичането на поплавъка на изненадващо място. Например, това поплавък е ляв floated DIV вътре в дясно плаващ DIV.
- Плаващите елементи ще седят един до друг, ако има място в контейнера. Например, този контейнер има три DIV елемента с широчина 100px, плаващи в контейнер с ширина 400px.
Можете дори да използвате плувки, за да създадете оформление на фото галерия. Поставяте всяка миниатюра (тя работи най-добре, когато всички са с еднакъв размер) в DIV с надписа и плаващите елементи DIV в контейнера.
Без значение колко широк е прозорецът на браузъра, миниатюрите ще се подредят равномерно.
Изключване на поплавъка
След като разберете как да получите елемент, който да плува, е важно да знаете как да изключите флота. Изключвате флота с CSS Clear property. Можете да изчистите левите плувки, десните плувки или и двете:
ясно: вляво;
ясно: вдясно;
ясно: и двете;
Всеки елемент, за който сте задали ясната собственост за, ще се появи под елемент, който е плаващ в тази посока. Например в този пример първите два параграфа от текста не се изчистват, но третата е.
Играйте с ясната стойност на различните елементи във вашите документи, за да получите различни ефекти на оформлението.
Едно от най-интересните плаващи оформления е поредица от изображения надолу отдясно или отляво на колоната до текстовете. Дори ако текстът не е достатъчно дълъг, за да се премине през изображението, можете да използвате изчистването на всички изображения, за да се уверите, че те се появяват в колоната, а не до предишното изображение.
HTML (повторете този параграф):
Дъщерята е напуснала временното си правоотношение, за да се оттегли от обвинението. Кандидатът не е дисидент, работещ и помагал.
CSS (за плуване на изображенията отляво):
img.float {float: left;
ясен: ляво;
марж: 5px;
}
И надясно:
img.float {float: right;
ясен: право;
марж: 5px;
}
Използване на плувки за оформление
След като разберете как работи флота, можете да започнете да го използвате, за да оформите уеб страниците си. Това са стъпките, които предприемам, за да създам плаваща уеб страница:
- Проектирайте оформлението (на хартия или в графичен инструмент или в главата ми).
- Определете къде ще бъдат разделенията на страниците.
- Определете ширините на различните контейнери и елементите в тях.
- Поплакнете всичко. Дори и най-външният контейнер елемент е плаващ вляво, така че аз знам къде ще бъде във връзка с браузъра изглед порт.
Докато знаете, че ширините (в проценти са изящни) на секциите ви за оформление, можете да използвате свойството на поплавъка, за да ги поставите там, където те принадлежат на страницата. И хубавото е, че не е нужно да се притеснявате колкото за това, че моделът на кутията е различен за Internet Explorer или Firefox.