Разбиране на CSS Float

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

В стилов лист имуществото на CSS float изглежда така:

.right {float: right; }

Това разкрива на браузъра, че всичко с класа на "дясно" трябва да бъде плавано надясно.

Ще го присвоите по следния начин:

class = "right" />

Какво можете да плавате с CSS float Property?

Не можете да плувате с всеки елемент на уеб страница. Можете да плавате само елементи на ниво блок. Това са елементите, които заемат пространство на страницата, като изображения (), параграфи (), разделения () и списъци ().

Други елементи, които засягат текста, но не създават кутийка на страницата, се наричат ​​инлайн елементи и не могат да бъдат плаващи. Това са елементи като span (), line breaks (), силен акцент () или курсив ().

Къде плават?

Можете да плувате елементи отдясно или отляво. Всеки елемент, който следва плаващия елемент, ще тече около плаващия елемент от другата страна.

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

Колко далеч ще плават?

Елемент, който е бил плаващ, ще се движи колкото е възможно по-далече отляво или отдясно на контейнерния елемент. Това води до няколко различни ситуации в зависимост от начина, по който е написан вашият код. За тези примери ще бъда плаващ малък DIV елемент вляво:

• Ако плаващия елемент няма предварително определена ширина, той ще заема колкото се може повече хоризонтално пространство, колкото е необходимо и налично, независимо от поплавъка. Забележка: Някои браузъри се опитват да поставят елементи до плаващи елементи, когато ширината не е дефинирана - обикновено дава на неплаващия елемент само малко пространство. Така че трябва винаги дефинирайте ширина върху плаващи елементи.
• Ако елементът на контейнера е HTML елемент, плаваният DIV ще седи в левия край на страницата.
• Ако елементът на контейнера се съдържа от нещо друго, плаващото DIV ще седи на лявото поле на контейнера.
• Можете да гнездите плаващи елементи и това може да доведе до изтичането на поплавъка на изненадващо място. Например, това плувка е ляво плаващо DIV вдясно DIV.
• Плаващите елементи ще седят един до друг, ако има място в контейнера. Например, този контейнер има три широки 100px DIV елементи, плаващи в контейнер с широчина 400px.

Можете дори да използвате плувки, за да създадете оформление на фото галерия. Можете да поставите всяка миниатюра (тя работи най-добре, когато всички са с еднакъв размер) в a DIV с надписа и плаващия DIV елементи в контейнера. Без значение колко широк е прозорецът на браузъра, миниатюрите ще се подредят равномерно.

Изключване на поплавъка

След като разберете как да получите елемент, който да плува, е важно да знаете как да изключите флота. Изключвате флота с CSS Clear property. Можете да изчистите левите плувки, десните плувки или и двете:

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

Всеки елемент, за който сте задали ясната собственост за, ще се появи под елемент, който е плаващ в тази посока. Например в този пример първите два параграфа от текста не се изчистват, но третата е.

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

HTML (повторете този параграф):

Дъщерята е напуснала временното си правоотношение, за да се оттегли от обвинението. Кандидатът не е дисидент, работещ и помагал.

CSS (за плуване на изображенията отляво):

img.float {float: left; ясен: ляво; марж: 5px;}

И надясно:

img.float {float: right; ясен: право; марж: 5px;}

Използване на плувки за оформление

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

• Проектирайте оформлението (на хартия или в графичен инструмент или в главата ми).
• Определете къде ще бъдат разделенията на страниците.
• Определете ширините на различните контейнери и елементите в тях.
• Поплакнете всичко. Дори и най-външният контейнер елемент е плаващ вляво, така че аз знам къде ще бъде във връзка с браузъра изглед порт.

Докато знаете, че ширината (в проценти е добра) на разделителните ви раздели, можете да използвате поплавък да ги постави там, където принадлежат на страницата. И хубавото е, че не е нужно да се притеснявате колкото за това, че моделът на кутията е различен за Internet Explorer или Firefox.