Какво е CSS Float и къде ще го използваме?

В долният пример с HTML изображенията имаме 4 такива, които float-ват или с други думи казано имат плаващо поведение. Това поведение може да се настрои по три начина – ляво, дясно и изчистено. В примерът поведението е елементите да плават на ляво. Има JavaScript код, който скрива всеки на който е кликнато – така че може да поцъкате малко :).

Чрез CSS float можем да определим дали един елемент да седи отляво или отдясно. Float много често се използва за изображения, но също така е полезно при оформянето на страница. Често се използва при оформянето на новинарски статии. Това вече не е много актуално тъй като вече разполагаме с flexbox и CSS grid!

Как плават елементите

Един елемент може да float-ва само в ляво и в дясно, тъй като елементите вървят според реда в който са в HTML кода и посока от горе към долната част на страницата. Един елемент ще се придвижи максимално на ляво или максимално на дясно (доколкото му позволява родителският елемент). Елементите след този, който е със свойство float се подреждат около него. Поведението на елементите преди плаващият елемент няма да бъдат засегнато. Ако изображението float-ва надясно текста след него ще застане от лявата му страна:

Плаващи елементи поставени един до друг

Ако поставим няколко такива елемента един след друг, в браузъра ще застанат един до друг стига да има място. В първият пример на тази страница може да видим галерия от изображения направени с помощта на float. А в следващият имаме няколко елемента div.

Изключване на Float – Как да използваме Clear

Елементите след елемента с float ще се наредят около него. За да избегнем това, можем да използваме свойството clear. То определя от коя страна на елемента е забранено да се вливат елементи. Добавяне на текст в галерията със снимки използвайки float и clear:

Картинка с рамка и вътрешно отстояние, коята float-ва от дясната страна. Опитайте сами »
Снимка с текст, която флоутва в дясно. Опитайте сами »
Първата буква на параграф флоутва на ляво, за да наподоби стил на писане на писмо. Опитайте сами »
Създаване на хоризонтално меню. Използвайте флоут със списък, за да създадете хоризонтално меню. Опитайте сами »
Създаване на начална страница, без таблици Използвайте флоут, за да създадете страница с хедър, футър, ляво съдържание и основното съдържание. Опитайте сами »

• none – Позволява плаващи елементи от двете страни. Това е по подразбиране
• left – от лявата страна не се допускат плаващи елементи
• right – Не се допускат плаващи елементи от дясната страна
• both – няма плаващи елементи, позволени от лявата или от дясната страна
• inherit – Елементът наследява ясната стойност на родителя му

Всички CSS Float Properties