Флоат - ЦСС-трикови

floatИмовина у ЦСС се користи за позиционирање и распоред на веб страницама.

.module ( float: left; )

Вредности

• none: елемент не плута. Ово је почетна вредност.
• left: лебди елемент лево од његовог контејнера.
• right: плута елемент десно од његовог контејнера.
• inherit: елемент наслеђује пловећи правац свог родитеља.

Напомена: Елемент који се лебди је аутоматски display: block;

Шта значи пловак?

Да бисмо разумели сврху и порекло float, можемо потражити дизајн штампе. У распореду штампе, слике могу бити постављене на страницу тако да се текст омотава по потреби. Ово се обично и на одговарајући начин назива „премотавање текста“. Ево примера за то.

У програмима за распоред страница, оквирима у којима се налази текст може се рећи да поштују прелом текста или да га игноришу. Занемаривање премотавања текста омогућиће да речи пређу право преко слике као да је није ни било. То је разлика између те слике која је део тока странице (или не). Веб дизајн је врло сличан.

У веб дизајну, елементи странице са ЦСС floatсвојством примењеним на њих слични су сликама у распореду штампе где текст тече око њих. Плутајући елементи остају део тока веб странице. Ово се значајно разликује од елемената странице који користе апсолутно позиционирање. Апсолутно позиционирани елементи странице уклањају се из тока веб странице, на пример када је текстуалном оквиру у распореду штампања речено да занемарује премоштавање странице. Апсолутно позиционирани елементи странице неће утицати на положај осталих елемената, а други елементи неће утицати на њих, било да се додирују или не.

Демо

Ова демонстрација приказује чланак са две слике: једна постављена на float: left, а друга постављена на float: right. Притисните дугме „укључи / искључи плове“ да бисте искључили и укључили пловке.

Погледајте Пример оловке са пловком од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Лебди за распоред

Осим једноставног примера умотавања текста око слика, пловци се могу користити за стварање целокупних веб изгледа .

Флоатс су такође корисни за распоред у мањим инстанцама. Узмимо за пример ово мало подручје веб странице. Ако користимо floatза слику аватара, када та слика промени величину, текст у пољу ће се преобликовати да би се прилагодио:

Исти распоред могао би се постићи коришћењем релативног позиционирања на контејнеру и апсолутног позиционирања на аватару. Али, када се то уради на тај начин, аватар неће утицати на текст и неће моћи да се преобликује приликом промене величине.

Демо

Ова демонстрација приказује аватар са float: leftпримењеним. Притисните дугме „пребаци величину слике“ да бисте видели ширу верзију слике аватара. Приметите да се текст поново прилагођава слици, уместо да је прегази.

Погледајте демонстрацију Пен Флоат од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Чишћење пловка

Флоатово сестринско имање је clear. Елемент на коме је постављено clearсвојство неће се померити горе поред пловка као што пловак жели, већ ће се сам померити низ пловак. Поново је илустрација кориснија од речи:

У горњем примеру, бочна трака је плутајућа удесно и краћа је од главне области садржаја. Подножје је тада потребно да ускочи у онај расположиви простор који захтева пловак. Да би решили овај проблем, подножје се може обрисати како би се осигурало да остане испод оба плутајућа колоне.

#footer ( clear: both; )

Цлеар има и четири важеће вредности. Вредност bothсе најчешће користи, што уклања пловке који долазе из било ког правца. Вредности leftи rightмогу се користити за брисање пловка само у једном смеру. Почетна вредност је none, што је обично непотребно, осим ако се користи за изричито уклањање постављене clearвредности. Вредност inheritчини да елемент наследи clearвредност свог родитеља . Чудно, Интернет Екплорер није подржавао ову вредност до ИЕ8.

Чишћење само флоат-а leftили rightфлоат, иако ређе виђено у дивљини, дефинитивно има користи.

Велики колапс

Једна од збуњујућих ствари у раду са пловцима је како они могу утицати на елемент који их садржи (њихов „родитељски“ елемент). Ако родитељски елемент не садржи ништа осим плутајућих елемената, његова висина се срушава на ништа. То није увек очигледно ако родитељ не садржи никакву визуелно уочљиву позадину, али важно је тога бити свестан.

Колико год рушење изгледало контраинтуитивно, алтернатива је гора. Размотрите овај сценарио:

Да се ​​елемент блока на врху аутоматски проширио како би прихватио плутајући елемент, имали бисмо неприродан размак у протоку текста између пасуса, без практичног начина да се то поправи. Да је то случај, ми дизајнери бисмо се много јаче жалили на ово понашање него на рушење.

Скоро увек се треба позабавити колапсом како би се спречили необични изглед и проблеми са више прегледача. Поправљамо га уклањањем пловка након плутајућих елемената у контејнеру, али пре затварања контејнера.

Технике за уклањање пловака

Ако сте у ситуацији да увек знате шта ће бити следећи елемент, можете применити clear: both;вредност на тај елемент и кренути у посао. Ово је идеално јер не захтева модне хаковања и никакве додатне елементе што га чини савршено семантичким. Наравно, ствари обично не иду тако и у нашој кутији алата морамо имати више алата за чишћење пловка.

• Метода празног дељења је, дословно, празан див. . Понекад ћете видети
елемент или неки други случајни елемент који се користи, али див је најчешћи јер нема подразумевани стил прегледача, нема никакву посебну функцију и вероватно неће бити генерички обликован са ЦСС-ом. Ову методу презиру семантички пуристи, јер она нема контекстуално значење странице и постоји само за презентацију. Наравно, у најстрожем смислу су у праву. Али, то заврши посао и никоме не наноси штету.
• Метода преливања се ослања на постављање overflowсвојства ЦСС на родитељски елемент. Ако је ово својство постављено на autoили hiddenна надређени елемент, надређени ће се проширити тако да садржи плутајуће податке, ефикасно га уклањајући за следеће елементе. Ова метода може бити прелепо семантичка јер можда неће захтевати додатне елементе. Међутим, ако нађете да додајете нови divсамо да бисте ово применили, он је подједнако несемантичан као празна divметода и мање прилагодљив. Такође имајте на уму да својство преливања није посебно за брисање пловака. Пазите да не сакријете садржај или не покренете нежељене клизаче.
• Једноставна метода чишћења (иначе позната као „цлеарфик“) користи паметни ЦСС псеудо селектор ( :after) за уклањање плутајућих података. Уместо да на родитељу поставите прелив, на њега примените додатну класу попут „цлеарфик“. Затим примените овај ЦСС:

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

  Ово ће применити мали део садржаја, скривен од погледа, након надређеног елемента који чисти флоат. Ово није сасвим цела прича, јер је потребан додатни код за смештај старијих прегледача. Напомена: Погледајте и овај исечак који прати најновије и најбоље у јасним исправкама, укључујући новији „микро цлеарфик“.

Различити сценарији захтевају различите методе чишћења пловка. Узмимо за пример мрежу блокова, сваки од различитих типова.

Да бисмо боље визуелно повезали сличне блокове, желимо да започнемо нови ред како желимо, у овом случају када се боја промени. Могли бисмо да користимо или метод преливања или једноставно чишћење ако свака од група боја има надређени елемент. Или, користимо празну див методу између сваке групе. Три див-ова премотавања који раније нису постојали или три након див-ова који раније нису постојали. Пустићу вас да одлучите шта је боље.

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

Плутачи се често добијају због крхкости. Већина ове крхкости долази од грешака у ИЕ6 и ИЕ7. Како ти прегледачи одмичу у прошлост, ове грешке бледе заједно са њима. Али, ипак их вреди разумети ако икада будете требали отклонити грешке у „ОлдИЕ“.

• Притисак је симптом да је елемент унутар плутајућег предмета шири од самог пловка (обично слика). Већина прегледача ће приказати слику изван флоат-а, али део који вири неће утицати на други изглед. Старе верзије ИЕ прошириле су флоат тако да садрже слику, често драстично утичући на изглед. Уобичајени пример је слика која вири из главног садржаја и помери бочну траку доле.
  

  

  Брзо решење: Уверите се да немате ниједну слику која то ради, користите overflow: hidden;да бисте одсекли вишак.

• Грешка двоструке маргине - Још једна ствар коју треба имати на уму када се бавите ИЕ 6 је да ако примените маргину у истом смеру као и флоат, она ће удвостручити маргину. Брзо поправљање: поставите display: inlineна пловак и не брините да ће остати елемент на нивоу блока.
• 3пк ЈОГ је када текст који је горе уз погодио мрежу елемент је мистериозно шутирали далеко од 3пк као неки чудни ФорцеФиелд око пловак. Брзо решење: поставите ширину или висину на текст на који се то односи.
• У ИЕ 7, грешка доње маргине била је када родитељ игнорише доњу маргину те деце ако је плутајући родитељ плутао децу унутар ње. Брзо решавање: уместо тога користите доњу облогу на родитељу.

Алтернативе

Ако вам је потребно омотавање текста око слика, за флоат заиста не постоје алтернативе. Кад смо већ код тога, погледајте ову прилично паметну технику за омотавање текста око неправилних облика. Али за изглед странице дефинитивно постоје избори. Ериц Сол има чланак о А Лист Апарт, Фаук Абсолуте Поситионинг, који описује врло занимљиву технику која на много начина комбинује флексибилност пловака са снагом апсолутног позиционирања.

ЦСС3 се решава изгледа странице на неколико начина:

• Флекбок
• Изглед у више колона
• Распоред мреже

Расправљало се о апсолутно позиционираним пловцима (нпр. Апсолутно се позиционирате као нормално, али елемент и даље може да утиче на друге елементе, попут омотавања текста око њега), али мислим да је идеја одложена због сличности са другим робуснијим идејама за распоред.

Видео

Направио сам скринцаст неко време уназад објашњавајући многе од ових флоат концепата.

Повезан

• clear
• position

Више информација

• float у спецификацији В3Ц
• float на МДН

Подршка прегледача

Хром	Сафари	Фирефок	Опера	ИЕ	Андроид	иОС
Све	Све	Све	Све	Све	Све	Све