Flyte - CSS-triks

Anonim

Den floateiendom i CSS brukes for posisjonering og layout på nettsider.

.module ( float: left; )

Verdier

  • none: elementet flyter ikke. Dette er den opprinnelige verdien.
  • left: flyter elementet til venstre for beholderen.
  • right: flyter elementet til høyre for containeren.
  • inherit: elementet arver foreldrenes flyteretning.
Merk: Et element som er flytende blir automatisk display: block;

Hva betyr float?

For å forstå formålet og opprinnelsen til float, kan vi se etter trykkdesign. I et utskriftsoppsett kan bilder settes inn på siden slik at teksten brytes rundt dem etter behov. Dette kalles ofte og "passende tekst". Her er et eksempel på det.

I sidelayoutprogrammer kan boksene som inneholder teksten bli bedt om å respektere tekstinnpakningen, eller å ignorere den. Hvis du ignorerer tekstfolien, kan ordene flyte rett over bildet som om det ikke engang var der. Dette er forskjellen mellom at bildet er en del av flyten på siden (eller ikke). Nettdesign er veldig lik.

I webdesign er sideelementer med CSS- floategenskapen som er brukt på dem, akkurat som bildene i utskriftsoppsettet der teksten flyter rundt dem. Flyteelementer forblir en del av flyten på websiden. Dette er tydelig annerledes enn sideelementer som bruker absolutt posisjonering. Absolutt posisjonerte sideelementer fjernes fra flyten på websiden, som når tekstboksen i utskriftsoppsettet ble bedt om å ignorere sideomslaget. Absolutt plasserte sideelementer vil ikke påvirke posisjonen til andre elementer, og andre elementer vil ikke påvirke dem, enten de berører hverandre eller ikke.

Demo

Denne demoen viser en artikkel med to bilder: ett satt til float: leftog et sett til float: right. Trykk på “toggle floats” -knappen for å slå flyter av og på.

Se pennfloateksemplet av CSS-Tricks (@ css-tricks) på CodePen.

Flyter for layout

Bortsett fra det enkle eksemplet på å pakke inn tekst rundt bilder, kan du bruke flater til å lage hele weboppsett .

Flyter er også nyttige for layout i mindre tilfeller. Ta for eksempel dette lille området på en webside. Hvis vi bruker floatfor avatarbildet vårt, vil teksten i ruten flyte for å imøtekomme det når bildet endrer størrelse:

Det samme oppsettet kan oppnås ved å bruke relativ posisjonering på containeren og absolutt posisjonering på avataren også. Men når det er gjort på den måten, ville teksten ikke bli påvirket av avataren, og ville ikke være i stand til å reflektere over en størrelsesendring.

Demo

Denne demoen viser en avatar med float: leftanvendt. Trykk på “veksle bildestørrelse” -knappen for å se en bredere versjon av avatarbildet. Legg merke til at teksten flyter for å imøtekomme bildet i stedet for å løpe over bildet.

Se Pen Float Demo av CSS-Tricks (@ css-tricks) på CodePen.

Rydding av flottøren

Floats søstereiendom er clear. Et element som har clearegenskapen satt på, vil ikke bevege seg opp ved siden av flottøren slik flottøren ønsker, men vil bevege seg ned forbi flottøren. Igjen er en illustrasjon mer nyttig enn ord:

I eksemplet ovenfor svever sidefeltet til høyre og er kortere enn hovedinnholdsområdet. Bunnteksten kreves da for å hoppe opp i den tilgjengelige plassen som kreves av flottøren. For å løse dette problemet kan bunnteksten tømmes for å sikre at den holder seg under begge flytende kolonnene.

#footer ( clear: both; )

Clear har også fire gyldige verdier. Verdien bother mest brukt, som tømmer flyter som kommer fra begge retninger. Verdiene leftog rightkan brukes til å bare fjerne flottøren fra henholdsvis en retning. Den opprinnelige verdien er none, noe som vanligvis er unødvendig med mindre den brukes til å eksplisitt fjerne en clearverdi som er angitt. Verdien inheritfår elementet til å arve foreldrenes clearverdi. Merkelig nok støttet ikke Internet Explorer denne verdien før IE8.

Å fjerne bare lefteller rightflyte, selv om det er mindre vanlig i naturen, har definitivt sine bruksområder.

Den store kollapsen

En av de mer forvirrende tingene ved å jobbe med flyter er hvordan de kan påvirke elementet som inneholder dem (deres "foreldre" -element). Hvis et overordnet element bare inneholder flytende elementer, kollapser høyden til ingenting. Dette er ikke alltid åpenbart hvis foreldrene ikke har noen synlig bakgrunn, men det er viktig å være klar over.

Så kontraintuitivt som å kollapse kan virke, er alternativet verre. Tenk på dette scenariet:

Hvis blokkelementet på toppen automatisk hadde utvidet seg for å imøtekomme det flytende elementet, ville vi ha et unaturlig avstandsbrudd i tekstflyten mellom avsnitt, uten praktisk måte å fikse det på. Hvis dette var tilfelle, ville vi designere klage mye hardere over denne oppførselen enn vi gjør om å kollapse.

Å kollapse må nesten alltid håndteres for å forhindre merkelig layout og problemer i tvers av nettlesere. Vi fikser det ved å rydde flottøren etter de flytende elementene i containeren, men før containeren lukkes.

Teknikker for rydding av flyter

Hvis du er i en situasjon der du alltid vet hva det påfølgende elementet kommer til å være, kan du bruke clear: both;verdien på det elementet og gå videre med virksomheten din. Dette er ideelt, da det ikke krever noen fancy hacks og ingen ekstra elementer som gjør det perfekt semantisk. Selvfølgelig fungerer ting vanligvis ikke slik, og vi må ha flere verktøy for flyting i verktøyboksen.

  • Den tomme div-metoden er bokstavelig talt en tom div. . Noen ganger vil du se et
    element eller et annet tilfeldig element brukt, men div er det vanligste fordi det ikke har noen nettleserstil styling, ikke har noen spesiell funksjon, og det er lite sannsynlig at det blir generisk stylet med CSS. Denne metoden blir foraktet av semantiske purister, siden den ikke har noen kontekstuell betydning for siden og er der kun for presentasjon. I strengeste forstand har de selvfølgelig rett. Men det blir jobben gjort og skader ingen.
  • Overflow-metoden er avhengig av å sette overflowCSS-egenskapen på et overordnet element. Hvis denne egenskapen er satt til autoeller hiddenpå det overordnede elementet, utvides den overordnede for å inneholde flottørene og fjerner den effektivt for påfølgende elementer. Denne metoden kan være vakkert semantisk, da den kanskje ikke krever flere elementer. Imidlertid, hvis du finner deg selv å legge til et nytt divbare for å bruke dette, er det like usemantisk som den tomme divmetoden, og mindre tilpasningsdyktig. Vær også oppmerksom på at overløpsegenskapen ikke er spesifikt for å rydde flyter. Vær forsiktig så du ikke skjuler innhold eller utløser uønskede rullefelt.
  • Easy Clearing-metoden (ellers kjent som “clearfix”) bruker en smart CSS-pseudovelger ( :after) for å fjerne flyt. I stedet for å sette overløpet på foreldrene, bruker du en ekstra klasse som "clearfix" til den. Bruk deretter denne CSS: 
    .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

    Dette vil bruke en liten bit innhold, skjult fra visningen, etter det overordnede elementet som rydder flottøren. Dette er ikke helt hele historien, ettersom tilleggskode må brukes til å imøtekomme eldre nettlesere. Merk: Se også dette utdraget som holder oversikt over det siste og beste innen clearfixes, inkludert den nyere "micro clearfix."

Ulike scenarier krever forskjellige flytningsmetoder. Ta for eksempel et rutenett av blokker, hver av forskjellige typer.

For å bedre koble lignende blokker visuelt, vil vi starte en ny rad som vi vil, i dette tilfellet når fargen endres. Vi kunne bruke enten overløps- eller enkel ryddemetode hvis hver av fargegruppene hadde et overordnet element. Eller vi bruker den tomme div-metoden mellom hver gruppe. Tre innpakningsdeler som ikke tidligere eksisterte eller tre etter divs som ikke tidligere eksisterte. Jeg lar deg bestemme hvilken som er bedre.

Problemer med flyter

Flyter blir ofte slått på for å være skjøre. Størstedelen av denne skjørheten kom fra feil i IE6 og IE7. Når disse nettleserne forsvinner inn i fortiden, falmer disse feilene sammen med dem. Men det er fortsatt verdt å forstå dem hvis du noen gang trenger å feilsøke en "OldIE".

  • Pushdown er et symptom på at et element i et flytende element er bredere enn selve flottøren (vanligvis et bilde). De fleste nettlesere vil gjengi bildet utenfor flottøren, men ikke at delen som stikker ut påvirker annet oppsett. Gamle versjoner av IE utvidet flottøren til å inneholde bildet, og påvirket ofte layoutet drastisk. Et vanlig eksempel er et bilde som stikker ut av hovedinnholdet og skyver sidefeltet nedenfor.

    Rask løsning: Sørg for at du ikke har noen bilder som gjør dette, bruk for overflow: hidden;å kutte overflødig.

  • Double Margin Bug - En annen ting å huske når du arbeider med IE 6 er at hvis du bruker en margin i samme retning som flottøren, vil den doble margen. Rask løsning: sett display: inlinepå flottøren, og ikke bekymre deg, det forblir et element på blokknivå.
  • Den 3px Jog er når tekst som er opp ved siden av en fløt element mystisk sparket bort av 3px som en merkelig Forcefield rundt flottøren. Rask løsning: angi en bredde eller høyde på den berørte teksten.
  • I IE 7, den bunnmargen Bug var da om en fløt forelder har fløt barn inni den, er bunnmargen på de barna oversett av foreldrene. Rask løsning: Bruk bunnpolstring på foreldrene i stedet.

Alternativer

Hvis du trenger tekstinnpakning rundt bilder, er det virkelig ingen alternativer for å flyte. Når du snakker om det, sjekk ut denne ganske smarte teknikken for å pakke tekst rundt uregelmessige former. Men for sideoppsett er det definitivt valg. Eric Sol har en artikkel om A List Apart, Faux Absolute Positioning, som beskriver en veldig interessant teknikk som på mange måter kombinerer fleksibiliteten til flottører med styrken til absolutt posisjonering.

CSS3 takler sidelayout på et par måter:

  • Flexbox
  • Layout med flere kolonner
  • Rutenettoppsett

Absolutt posisjonerte flyter (f.eks. At du absolutt posisjonerer som normalt, men elementet er fremdeles i stand til å påvirke andre elementer, som å ha tekstfolie rundt det) ble diskutert, men jeg tror ideen ble skrinlagt på grunn av likheter med andre mer robuste layoutideer.

Video

Jeg gjorde en screencast for en stund tilbake og forklarte mange av disse flytebegrepene.

I slekt

  • clear
  • position

Mer informasjon

  • float i W3C-spesifikasjonen
  • float ved MDN

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
Alle Alle Alle Alle Alle Alle Alle