Pludiņš - CSS-triki

floatĪpašums CSS izmanto pozicionēšanu un izkārtojumu tīmekļa lapās.

.module ( float: left; )

Vērtības

• none: elements nepeld. Šī ir sākotnējā vērtība.
• left: peld elementu pa kreisi no konteinera.
• right: peld elementu pa labi no tā konteinera.
• inherit: elements pārmanto sava vecāka peldēšanas virzienu.

Piezīme: Peldošais elements tiek automātiski display: block;

Ko nozīmē peldēt?

Lai saprastu mērķu un izcelsmi float, mēs varam meklēt drukas dizainu. Drukas izkārtojumā attēlus var ievietot lapā tā, lai pēc vajadzības teksts ap tiem būtu. To parasti un atbilstoši sauc par “teksta aplaušanu”. Šeit ir piemērs tam.

Lappuses izkārtojuma programmās lodziņiem, kuros ir teksts, var teikt, ka tie ievēro teksta ietīšanu vai to ignorē. Ignorējot teksta ietīšanu, vārdi var plūst tieši virs attēla, it kā tas pat tur nebūtu. Šī ir atšķirība starp to, ka attēls ir lapas plūsmas daļa (vai ne). Tīmekļa dizains ir ļoti līdzīgs.

Tīmekļa dizainā lapu elementi ar tiem floatlietoto CSS rekvizītu ir gluži kā attēli drukas izkārtojumā, kur tek apkārt tekošais teksts. Peldošie elementi paliek daļa no tīmekļa lapas plūsmas. Tas skaidri atšķiras no lapas elementiem, kuros tiek izmantota absolūtā pozicionēšana. Pilnīgi novietoti lapas elementi tiek noņemti no tīmekļa plūsmas, piemēram, kad drukas izkārtojuma tekstlodziņam tika uzdots ignorēt lapas iesaiņošanu. Pilnīgi izvietoti lapas elementi neietekmēs citu elementu stāvokli, un citi elementi tos neietekmēs neatkarīgi no tā, vai tie pieskaras viens otram vai ne.

Demonstrācija

Šajā demonstrācijā tiek parādīts raksts ar diviem attēliem: viens iestatīts uz float: leftun otrs float: right. Nospiediet pogu “pārslēgt pludiņus”, lai izslēgtu un ieslēgtu pludiņus.

Skatiet CSS-Tricks (@ css-tricks) Pen Float piemēru vietnē CodePen.

Pludiņi izkārtojumam

Līdztekus vienkāršajam teksta aplīmēšanas piemēram, attēliem var izmantot pludiņus, lai izveidotu veselus tīmekļa izkārtojumus .

Pludiņi ir noderīgi arī izkārtojumam mazākos gadījumos. Veikt, piemēram, šo mazo tīmekļa lapas apgabalu. Ja mēs izmantojam floatmūsu iemiesojuma attēlu, mainot šī attēla izmēru, lodziņā esošais teksts mainīsies, lai to pielāgotu:

Šo pašu izkārtojumu var panākt, izmantojot relatīvo pozicionēšanu uz konteinera un absolūto pozicionēšanu arī iemiesojumā. Bet, kad tas tiek izdarīts šādā veidā, iemiesojums neietekmēs tekstu un nevarēs atspoguļot lieluma izmaiņas.

Demonstrācija

Šajā demonstrācijā tiek parādīts iemiesojums ar lietojumprogrammu float: left. Nospiediet pogu “pārslēgt attēla izmēru”, lai redzētu plašāku iemiesojuma attēla versiju. Ievērojiet, ka teksts mainās, lai tas atbilstu attēlam, nevis brauktu pār attēlu.

Skatiet CSS-Tricks (@ css-tricks) Pen Float demonstrāciju vietnē CodePen.

Notīriet pludiņu

Floata māsas īpašums ir clear. Elements, kuram ir cleariestatīts rekvizīts, nepārvietosies uz augšu blakus pludiņam, kā pludiņš vēlas, bet pats virzīsies uz leju gar pludiņu. Atkal ilustrācija ir noderīgāka nekā vārdi:

Iepriekš minētajā piemērā sānjosla ir novietota pa labi un ir īsāka par galveno satura laukumu. Pēc tam kājene ir jāatlec uz augšu tajā pieejamā vietā, kā to prasa pludiņš. Lai novērstu šo problēmu, kājeni var notīrīt, lai nodrošinātu, ka tā paliek zem abām peldošajām kolonnām.

#footer ( clear: both; )

Skaidrs ir arī četras derīgas vērtības. Vērtība bothir visbiežāk izmanto, kurā precizētas pludiņiem, kas nāk no abos virzienos. Vērtības leftun rightvar izmantot, lai notīrītu pludiņu tikai attiecīgi no viena virziena. Sākotnējā vērtība ir none, kas parasti nav vajadzīga, ja vien to neizmanto, lai skaidri noņemtu cleariestatīto vērtību. Vērtība inheritliek elementam mantot vecāku clearvērtību. Dīvainā kārtā programma Internet Explorer šo vērtību neatbalstīja līdz IE8.

Kaut arī tikai pludiņa leftvai rightpludiņa tīrīšana ir savvaļā retāk sastopama, noteikti to izmanto.

Lielais sabrukums

Viena no mulsinošākajām lietām darbā ar pludiņiem ir tas, kā tās var ietekmēt elementu, kas tos satur (viņu “vecāku” elementu). Ja pamatelementā nav nekas cits kā peldoši elementi, tā augstums nesakrīt. Tas ne vienmēr ir acīmredzams, ja vecāki nesatur vizuāli pamanāmu fonu, taču ir svarīgi to apzināties.

Lai arī cik pretrunīgi varētu šķist sabrukums, alternatīva ir sliktāka. Apsveriet šo scenāriju:

Ja augšpusē esošais bloka elements būtu automātiski paplašināts, lai tajā ietilptu peldošais elements, teksta plūsmā starp rindkopām mums būtu nedabisks atstarpju pārtraukums, bez praktiska veida, kā to salabot. Ja tas tā būtu, mēs, dizaineri, par šo uzvedību sūdzētos daudz smagāk nekā par sabrukumu.

Gandrīz vienmēr ir jārisina sabrukšana, lai novērstu dīvainu izkārtojumu un dažādu pārlūkprogrammu problēmas. Mēs to salabojam, notīrot pludiņu pēc traukā esošajiem elementiem, bet pirms konteinera aizvēršanas.

Pludiņu tīrīšanas paņēmieni

Ja atrodaties situācijā, kad vienmēr zināt, kas būs veiksmīgais elements, varat clear: both;šim elementam piemērot vērtību un turpināt savu biznesu. Tas ir ideāli, jo tam nav nepieciešami izdomāti uzlaušanas gadījumi un papildu elementi, kas padara to pilnīgi semantisku. Protams, lietas parasti nedarbojas šādā veidā, un mūsu rīkjoslā jābūt vairākiem tīrīšanas rīkiem.

• Tukšā div metode tiešā tiešā nozīmē ir tukša div. . Dažreiz jūs redzēsiet kādu izmantotu
elementu vai kādu citu nejaušu elementu, taču div ir visizplatītākais, jo tam nav pārlūkprogrammas noklusējuma stila, tam nav īpašas funkcijas un maz ticams, ka tas tiks vispārīgi veidots ar CSS. Šo metodi izsaka semantiskie puristi, jo tai nav lapas konteksta nozīmes un tā ir paredzēta tikai prezentācijai. Protams, visstingrākajā nozīmē viņiem ir taisnība. Bet tas paveic darbu un nevienam neko nesāp.
• Pārpildes metode balstās uz overflowCSS rekvizīta iestatīšanu vecāka elementam. Ja šis rekvizīts ir iestatīts uz pamatelementu autovai hiddenuz tā, vecāks izvērsīsies, lai ietvertu pludiņus, efektīvi notīrot to nākamajiem elementiem. Šī metode var būt skaisti semantiska, jo tai var nebūt vajadzīgi papildu elementi. Tomēr, ja jums šķiet, ka pievienojat jaunu, divlai to izmantotu, tas ir tikpat nesemantisks kā tukšā divmetode un ir mazāk pielāgojams. Ņemiet vērā arī to, ka pārpildes īpašums nav paredzēts tieši pludiņu tīrīšanai. Esiet piesardzīgs, lai neslēptu saturu un neizraisītu nevēlamus ritjoslas.
• Vienkāršā tīrīšanas metode (citādi saukta par “clearfix”) izmanto gudru CSS pseido selektoru ( :after), lai notīrītu pludiņus. Tā vietā, lai iestatītu vecāku pārplūdi, tam jāpielieto papildu klase, piemēram, “clearfix”. Pēc tam izmantojiet šo CSS:

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

  Pēc vecākelementa, kas notīra pludiņu, tiks izmantots neliels satura saturs, kas ir paslēpts no skata. Šis nav viss stāsts, jo vecāku pārlūkprogrammu izmitināšanai ir jāizmanto papildu kods. Piezīme. Skatiet arī šo fragmentu, kurā tiek izsekoti jaunākie un labākie tīrīšanas labojumi, ieskaitot jaunāko “micro clearfix”.

Dažādi scenāriji prasa dažādas pludiņa tīrīšanas metodes. Piemēram, ņemiet vērā dažādu veidu bloku režģi.

Lai labāk vizuāli savienotu līdzīgos blokus, mēs vēlamies sākt jaunu rindu, kā mums patīk, šajā gadījumā, kad mainās krāsa. Mēs varētu izmantot vai nu pārpildes, vai arī vienkāršu notīrīšanas metodi, ja katrai krāsu grupai būtu vecāku elements. Vai arī mēs izmantojam tukšās div metodes starp katru grupu. Trīs iesaiņošanas divi, kas iepriekš neeksistēja, vai trīs pēc diviem, kas iepriekš neeksistēja. Es ļaušu jums izlemt, kas ir labāks.

Problēmas ar pludiņiem

Pludiņi bieži tiek pārspēti par trauslumu. Lielāko daļu šīs trausluma radīja IE6 un IE7 kļūdas. Kad šīs pārlūkprogrammas izzūd pagātnē, šīs kļūdas izzūd kopā ar tām. Bet joprojām ir vērts tos izprast, ja jums kādreiz ir nepieciešams atkļūdot “OldIE”.

• Nolaišanās ir simptoms, ka peldošā priekšmeta iekšpusē esošais elements ir platāks par pašu pludiņu (parasti attēls). Lielākā daļa pārlūkprogrammu attēlu renderēs ārpus pludiņa, taču tā, lai izliektā daļa ietekmētu citu izkārtojumu. Vecās IE versijas paplašināja pludiņu, lai tajā būtu attēls, bieži vien krasi ietekmējot izkārtojumu. Izplatīts piemērs ir attēls, kas izlec no galvenā satura, apakšējā pusē nospiežot sānjoslu.
  

  

  Ātrais labojums: pārliecinieties, ka jums nav attēlu, kas to dara, izmantojiet, overflow: hidden;lai nogrieztu lieko.

• Double Margin Bug - Vēl viena lieta, kas jāatceras, strādājot ar IE 6, ir tā, ka, ja jūs izmantojat rezervi tajā pašā virzienā kā pludiņš, tā dubultos rezervi. Ātra labošana: iestatiet display: inlineuz pludiņa, un neuztraucieties, ka tas paliks bloka līmeņa elements.
• 3 pikseļu jogs ir tad, kad tekstu, kas atrodas blakus peldošam elementam, noslēpumaini izdzen 3 pikseļi kā dīvainu spēka lauku ap pludiņu. Ātra labošana: iestatiet skartā teksta platumu vai augstumu.
• Programmā IE 7 Bottom Margin Bug bija tad, ja, ja peldošais vecāks tajā ir peldējis bērnus, vecāks ignorē šo bērnu apakšējo robežu. Ātra labošana: tā vietā vecākam tiek izmantots apakšējais polsterējums.

Alternatīvas

Ja jums ir nepieciešams teksts apvīt attēlus, pludiņam tiešām nav alternatīvu. Runājot par to, pārbaudiet šo diezgan gudro paņēmienu, kā tekstu ietīt ap neregulārām formām. Bet lapas izkārtojumam noteikti ir izvēles iespējas. Ērikam Solam ir raksts par A List Apart, Faux Absolute Positioning, kurā aprakstīta ļoti interesanta tehnika, kas daudzējādā ziņā apvieno pludiņu elastību ar absolūtās pozicionēšanas spēku.

CSS3 risina lapas izkārtojumu vairākos veidos:

• Flexbox
• Vairāku kolonnu izkārtojums
• Režģa izkārtojums

Tika apspriesti absolūti izvietoti pludiņi (piemēram, jūs absolūti pozicionējat kā parasti, bet elements joprojām spēj ietekmēt citus elementus, piemēram, teksts ir ap to aplīmēts), taču es domāju, ka ideja tika atstāta plauktā līdzību dēļ citām stingrākām izkārtojuma idejām.

Video

Es kādu laiku veicu ekrāna pārraidi, izskaidrojot daudzus no šiem pludiņa jēdzieniem.

Saistīts

• clear
• position

Vairāk informācijas

• float W3C spec
• float pie MDN

Pārlūka atbalsts

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Viss	Viss	Viss	Viss	Viss	Viss	Viss