CSS - Работа с плаващи елементи, IT Chef
Плаващ елемент е елемент на ниво блок, чието CSS свойство float е зададено на left или right. Плаващ елемент се позиционира по следния начин: той се откачва от текущата си позиция (текущата позиция е позицията, която елемент на ниво блок би заемал, ако не беше плаващ) и се позиционира вертикално (горната граница на плаващия елемент е подравнена с горната граница на текущия ред) и хоризонтално (в зависимост от стойността на свойството float, плаващият елемент ще бъде прикрепен доколкото е възможно към левия или десния край на родителския елемент). Останалото съдържание след плаващия елемент в този контейнер се увива около този плаващ елемент от противоположната страна. Позицията, която би заемал, ако не беше float, не му е присвоена, а елементите на контейнера след float ще заемат неговото място. Също така е необходимо да се има предвид, че височината на плаващия блок не влияе на височината на контейнерния блок, в който е поставен.
Например: височината на контейнер, в който е поставен само плаващ блок, ще бъде равна на 0.
Помислете за местоположението на плаващите блокове на пример. Първо, нека създадем 3 блока с различен фон и ги поставим в контейнер с височина 350px и подложка от всяка страна (padding) от 20px. По подразбиране елементите на ниво блок ще заемат цялата ширина на контейнера и ще бъдат разположени един под друг.
Сега, използвайки свойството float, ще променим блок 2 на float и ще зададем ширината му на 120px. Задаването на ширината за плаващи блокове е задължително. След промяната блоковият елемент 3 започна да тече около плаващия блок от противоположната страна.
Сега нека променим височината на блок елемент 3 и забележетече след обвиване около плаващия елемент, елемент на ниво блок 3 е подравнен вляво.
Сега нека направим 1 блок плаващ, като допълнително зададем ширината му на 120px и височината на 150px. Плаващата кутия 2 (червена) ще се стреми да се придържа възможно най-далеч към левия край на родителския елемент, но кутията 1 ще пречи, така че ще се придържа към десния край на кутията 1.
Забележка: Когато плаващите елементи нямат достатъчна ширина на контейнера, те ще се преместят надолу.
Начини за отмяна на опаковането
Плаващите блокове се използват много често при оформление на уеб страници. Въпреки това има ситуации и доста често, когато е необходимо да се отмени обтичането около блока от едната или от двете страни. Има няколко начина да направите това:
-
Със свойството clear CSS, което е настроено на ляво (излиза от лявата страна на елемента), дясно (излиза от десния ръб) или и двете (излиза от левия и десния ръб на елемента едновременно). В зависимост от ситуацията това свойство може да се приложи директно към блока или можете да създадете празен div със свойството clear и подходящата стойност. Например: