Плувка - CSS-трикове

В floatимота в CSS се използва за позициониране и оформление на уеб страници.

.module ( float: left; )

Стойности

• none: елементът не плава. Това е началната стойност.
• left: плува елемента вляво от контейнера му.
• right: плува елемента вдясно от контейнера му.
• inherit: елементът наследява плаващата посока на своя родител.

Забележка: Елемент, който е плаващ, е автоматично display: block;

Какво означава Float?

За да разберем целта и произхода на float, можем да разгледаме дизайна на печат. При оформление на печат изображенията могат да бъдат зададени на страницата така, че текстът да се увива около тях, ако е необходимо. Това често и по подходящ начин се нарича „обгръщане на текст“. Ето пример за това.

В програмите за оформление на страници на полетата, които съдържат текста, може да се каже да уважават текстовото обвиване или да го игнорират. Игнорирането на текстовото обвиване ще позволи на думите да преминат точно върху изображението, сякаш дори не е било там. Това е разликата между това изображение, което е част от потока на страницата (или не). Уеб дизайнът е много подобен.

В уеб дизайна елементите на страницата със floatсвойството CSS, приложено към тях, са точно като изображенията в оформлението за печат, където текстът тече около тях. Плаващите елементи остават част от потока на уеб страницата. Това е различно от елементите на страницата, които използват абсолютно позициониране. Абсолютно позиционираните елементи на страницата се премахват от потока на уеб страницата, като например когато текстовото поле в оформлението за печат е казано да игнорира обвиването на страницата. Абсолютно позиционираните елементи на страницата няма да повлияят на позицията на други елементи, а други елементи няма да им повлияят, независимо дали се допират или не.

Демонстрация

Тази демонстрация показва статия с две изображения: една настроена на float: leftи една настроена на float: right. Натиснете бутона “toggle floats”, за да изключите и включите плувките.

Вижте Примера с поплавък на писалката от CSS-Tricks (@ css-tricks) на CodePen.

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

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

Поплавците също са полезни за оформление в по-малки случаи. Вземете например тази малка част от уеб страница. Ако използваме floatза изображението на аватара, когато това изображение промени размера, текстът в полето ще се преформатира, за да го побере:

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

Демонстрация

Тази демонстрация показва аватар с float: leftприложен. Натиснете бутона „превключване на размера на изображението“, за да видите по-широка версия на изображението на аватара. Забележете, че текстът се преформатира, за да побере изображението, вместо да го прелиства.

Вижте демонстрацията на Pen Float от CSS-Tricks (@ css-tricks) на CodePen.

Изчистване на поплавъка

Имотът на сестра на Флоат е clear. Елемент, в който е clearзададено свойството, няма да се придвижва в съседство с поплавъка, както желае поплавъкът, а ще се премести надолу покрай поплавъка. Отново една илюстрация е по-полезна от думите:

В горния пример страничната лента се плува вдясно и е по-къса от основната област на съдържанието. След това долният колонтитул трябва да скочи в това свободно пространство, както се изисква от поплавъка. За да разрешите този проблем, долният колонтитул може да бъде изчистен, за да се гарантира, че ще остане под двете плаващи колони.

#footer ( clear: both; )

Clear има и четири валидни стойности. Най both-често се използва стойността, която изчиства плувки, идващи от двете посоки. Стойностите leftи rightмогат да се използват само за изчистване на поплавъка от една посока. Първоначалната стойност е none, което обикновено е ненужно, освен ако не се използва за изрично премахване на clearзададена стойност. Стойността inheritкара елемента да наследи стойността на своя родител clear. Странно, Internet Explorer не поддържа тази стойност до IE8.

Изчистването само на leftили rightfloat, макар и по-рядко срещано в дивата природа, определено има своите приложения.

Големият колапс

Едно от най-объркващите неща при работата с плувки е как те могат да повлияят на елемента, който ги съдържа (техният „родителски“ елемент). Ако родителският елемент не съдържа нищо освен плаващи елементи, височината му се свива до нищо. Това не винаги е очевидно, ако родителят не съдържа визуално забележим фон, но е важно да сте наясно.

Колкото и неинтуитивно да изглежда срутването, алтернативата е по-лоша. Помислете за този сценарий:

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

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

Техники за изчистване на плувки

Ако сте в ситуация, в която винаги знаете какъв ще бъде следващият елемент, можете да приложите clear: both;стойността към този елемент и да се заемете с бизнеса си. Това е идеално, тъй като не изисква изискани хакове и никакви допълнителни елементи, което го прави идеално семантичен. Разбира се, нещата обикновено не се получават по този начин и трябва да имаме повече инструменти за изчистване на поплавък в нашата кутия с инструменти.

• Методът Empty Div е, буквално, празен div. . Понякога ще видите
елемент или друг използван произволен елемент, но div е най-често срещаният, тъй като няма стил по подразбиране в браузъра, няма специална функция и е малко вероятно да бъде генериран с CSS. Този метод се презира от семантични пуристи, тъй като няма контекстуално значение за страницата и е чисто за представяне. Разбира се, в най-строгия смисъл те са прави. Но това свършва работата и не наранява никого.
• Методът за препълване разчита на задаване на overflowсвойството CSS на родителски елемент. Ако това свойство е зададено на autoили hiddenвърху родителския елемент, родителят ще се разшири, за да съдържа плувките, като ефективно ще го изчисти за следващите елементи. Този метод може да бъде красиво семантичен, тъй като може да не изисква допълнителни елементи. Ако обаче откриете, че добавяте нов, divсамо за да приложите това, той е еднакво несемантичен като празния divметод и по-малко приспособим. Също така имайте предвид, че свойството overflow не е специално за изчистване на плувки. Внимавайте да не скривате съдържанието или да не задействате нежелани ленти за превъртане.
• Методът за лесно изчистване (известен иначе като „clearfix“) използва умен CSS псевдо селектор ( :after) за изчистване на плувки. Вместо да задавате препълване на родителя, вие прилагате допълнителен клас като „clearfix“ към него. След това приложете този CSS:

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

  Това ще приложи малко бит съдържание, скрито от погледа, след родителския елемент, който изчиства плувката. Това не е съвсем цялата история, тъй като за по-старите браузъри трябва да се използва допълнителен код. Забележка: Вижте и този фрагмент, който проследява най-новите и най-добрите в clearfixes, включително по-новата „micro clearfix“

Различните сценарии изискват различни методи за изчистване на поплавък. Вземете например мрежа от блокове, всеки от различни видове.

За по-добро визуално свързване на подобни блокове, ние искаме да започнем нов ред, както ни харесва, в този случай, когато цветът се промени. Можем да използваме или метод за преливане, или лесно изчистване, ако всяка от цветовите групи има родителски елемент. Или използваме метода празен div между всяка група. Три обвиващи div, които не са съществували преди или три след div, които не са съществували преди. Ще ви оставя да решите кое е по-добро.

Проблеми с поплавъци

Плувките често биват, защото са крехки. По-голямата част от тази нестабилност идва от грешки в IE6 и IE7. Тъй като тези браузъри отминават в миналото, тези грешки избледняват заедно с тях. Но все пак си струва да ги разберете, ако някога се наложи да отстраните грешки на „OldIE“.

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

  

  Бърза корекция: Уверете се, че нямате изображения, които правят това, използвайте, за overflow: hidden;да отрежете излишното.

• Double Margin Bug - Друго нещо, което трябва да запомните, когато се занимавате с IE 6, е, че ако приложите поле в същата посока като float, то ще удвои маржа. Бърза корекция: задайте display: inlineна поплавъка и не се притеснявайте, че ще остане елемент на ниво блок.
• В 3px бутам е, когато текст, който е нагоре в непосредствена близост до плуваше елемент е мистериозно изрита от 3px като странно силово поле около поплавъка. Бърза корекция: задайте ширина или височина на засегнатия текст.
• В IE 7 грешката на долния марж е, когато ако плаващ родител е плавал деца в него, долният марж на тези деца се игнорира от родителя. Бърза корекция: вместо това използвайте подложка отдолу на родителя.

Алтернативи

Ако се нуждаете от обвиване на текст около изображения, наистина няма алтернативи за float. Говорейки за това, вижте тази доста умна техника за увиване на текст около неправилни форми. Но за оформлението на страницата определено има избор. Ерик Сол има статия за A List Apart, Faux Absolute Positioning, която описва много интересна техника, която в много отношения съчетава гъвкавостта на поплавъците със силата на абсолютното позициониране.

CSS3 се справя с оформлението на страницата по няколко начина:

• Flexbox
• Разположение на няколко колони
• Оформление на мрежата

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

Видео

Направих скрийнкаст преди известно време, обяснявайки много от тези концепции.

Свързани

• clear
• position

Повече информация

• float в спецификацията на W3C
• float на MDN

Поддръжка на браузър

Chrome	Сафари	Firefox	Опера	IE	Android	iOS
всичко	всичко	всичко	всичко	всичко	всичко	всичко