Flyde - CSS-tricks

Anonim

Den floatejendom i CSS bruges til positionering og layout på websider.

.module ( float: left; )

Værdier

  • none: elementet flyder ikke. Dette er den oprindelige værdi.
  • left: flyder elementet til venstre for sin container.
  • right: flyder elementet til højre for sin container.
  • inherit: elementet arver sin forælders flyderetning.
Bemærk: Et element, der flydes, er automatisk display: block;

Hvad betyder float?

For at forstå formålet med og oprindelsen af floatkan vi se på printdesign. I et udskriftslayout kan billeder indstilles på siden, så teksten ombrydes efter behov. Dette kaldes almindeligt og passende "tekst wrap". Her er et eksempel på det.

I sidelayoutprogrammer kan de felter, der indeholder teksten, blive bedt om at respektere tekstindpakningen eller ignorere den. Hvis du ignorerer tekstindpakningen, kan ordene flyde lige over billedet, som om det ikke engang var der. Dette er forskellen mellem, at billedet er en del af siden (eller ej). Webdesign er meget ens.

I webdesign er sideelementer med CSS- floategenskaben anvendt på dem ligesom billederne i udskriftslayoutet, hvor teksten flyder omkring dem. Flydede elementer forbliver en del af websides strøm. Dette adskiller sig tydeligt fra sideelementer, der bruger absolut positionering. Absolut placerede sideelementer fjernes fra strømmen af ​​websiden, som når tekstfeltet i udskriftslayoutet fik besked på at ignorere sideindpakningen. Absolut placerede sideelementer påvirker ikke placeringen af ​​andre elementer, og andre elementer påvirker dem ikke, uanset om de rører hinanden eller ej.

Demo

Denne demo viser en artikel med to billeder: et sæt til float: leftog et sæt til float: right. Tryk på knappen "skifte flydende" for at skifte flydende til og fra.

Se Pen Float-eksemplet af CSS-Tricks (@ css-tricks) på CodePen.

Flyder til layout

Bortset fra det enkle eksempel på indpakning af tekst omkring billeder, kan floats bruges til at oprette hele weblayouter .

Flyder er også nyttige til layout i mindre tilfælde. Tag for eksempel dette lille område på en webside. Hvis vi bruger floattil vores avatarbillede, når billedet ændrer størrelse, vil teksten i feltet flyde igen for at imødekomme det:

Det samme layout kunne opnås ved hjælp af relativ positionering på containeren og absolut positionering på avataren også. Men når det er gjort på den måde, ville teksten ikke blive påvirket af avataren og ville ikke være i stand til at reflektere over en størrelsesændring.

Demo

Denne demo viser en avatar med float: leftanvendt. Tryk på knappen "skift billedstørrelse" for at se en bredere version af avatarbilledet. Bemærk, at teksten flyder for at imødekomme billedet i stedet for at løbe over billedet.

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

Rydning af flyderen

Float søster ejendom er clear. Et element, der har clearegenskaben indstillet, bevæger sig ikke op ved siden af ​​svømmeren som svømmeren ønsker, men bevæger sig selv forbi svømmeren. Igen er en illustration mere nyttig end ord:

I ovenstående eksempel flyder sidebjælken til højre og er kortere end hovedindholdsområdet. Sidefoden skal derefter hoppe op i det ledige rum, som kræves af flyderen. For at løse dette problem kan sidefoden ryddes for at sikre, at den forbliver under begge flydende søjler.

#footer ( clear: both; )

Clear har også fire gyldige værdier. Værdien bothbruges mest, hvilket rydder flyder, der kommer fra begge retninger. Værdierne leftog rightkan bruges til kun at rydde svømmeren fra henholdsvis en retning. Den oprindelige værdi er none, hvilket typisk er unødvendig, medmindre den bruges til eksplicit at fjerne en clearværdi, der er indstillet. Værdien inheritfår elementet til at arve sin forældres clearværdi. Mærkeligt nok understøttede Internet Explorer ikke denne værdi før IE8.

Rydning kun af lefteller rightflyde, mens det er mindre almindeligt set i naturen, har bestemt sine anvendelser.

Det store sammenbrud

En af de mere forvirrende ting ved at arbejde med floats er, hvordan de kan påvirke det element, der indeholder dem (deres "overordnede" element). Hvis et overordnet element kun indeholder flydende elementer, kollapser dets højde til intet. Dette er ikke altid indlysende, hvis forældrene ikke indeholder nogen visuelt mærkbar baggrund, men det er vigtigt at være opmærksom på det.

Så kontraintuitivt som kollaps kan synes, er alternativet værre. Overvej dette scenarie:

Hvis blokelementet på toppen automatisk skulle udvides til at rumme det flydende element, ville vi have et unaturligt afstandsbrud i strømmen af ​​tekst mellem afsnit uden nogen praktisk måde at rette det på. Hvis dette var tilfældet, klagede vi designere meget hårdere over denne adfærd, end vi kollapser.

Det er næsten altid nødvendigt at håndtere sammenbrud for at forhindre mærkeligt layout og problemer i forskellige browsere. Vi retter det ved at rydde svømmeren efter de svævede elementer i containeren, men inden lukningen af ​​containeren.

Teknikker til rydning af flyde

Hvis du er i en situation, hvor du altid ved, hvad det efterfølgende element vil være, kan du anvende clear: both;værdien på det element og gå videre med din virksomhed. Dette er ideelt, da det ikke kræver fancy hacks og ingen yderligere elementer, der gør det perfekt semantisk. Naturligvis fungerer tingene normalt ikke på den måde, og vi skal have flere flydeklaringsværktøjer i vores værktøjskasse.

  • Den tomme div-metode er bogstaveligt talt en tom div. . Nogle gange vil du se et
    element eller et andet tilfældigt element brugt, men div er det mest almindelige, fordi det ikke har nogen browserens standard styling, ikke har nogen speciel funktion og sandsynligvis ikke vil blive generelt stylet med CSS. Denne metode foragtes af semantiske purister, da den ikke har nogen sammenhængende betydning for siden og er der udelukkende til præsentation. I strengeste forstand har de selvfølgelig ret. Men det får jobbet gjort og skader ingen.
  • Overflow-metoden er afhængig af at indstille overflowCSS-egenskaben på et overordnet element. Hvis denne egenskab er indstillet til autoeller hiddenpå det overordnede element, udvides forældren til at indeholde flyderne og rydder den effektivt for efterfølgende elementer. Denne metode kan være smukt semantisk, da den muligvis ikke kræver yderligere elementer. Men hvis du finder dig selv at tilføje et nyt divbare for at anvende dette, er det lige så usemantisk som den tomme divmetode og mindre tilpasningsdygtig. Husk også, at ejendommen til overløb ikke er specielt beregnet til at rydde flyde. Pas på ikke at skjule indhold eller udløse uønskede rullepaneler.
  • Easy Clearing-metoden (ellers kendt som “clearfix”) bruger en smart CSS-pseudovælger ( :after) til at rydde floats. I stedet for at indstille overløbet på forældrene, anvender du en ekstra klasse som “clearfix” til den. Anvend derefter denne CSS: 
    .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

    Dette vil anvende en lille smule indhold, skjult fra visningen, efter det overordnede element, der rydder svømmeren. Dette er ikke helt hele historien, da yderligere kode skal bruges til at rumme ældre browsere. Bemærk: Se også dette uddrag, der holder styr på det nyeste og bedste inden for clearfixes, inklusive det nyere "micro clearfix."

Forskellige scenarier kræver forskellige float clearing-metoder. Tag for eksempel et gitter af blokke, hver af forskellige typer.

For bedre at kunne forbinde de lignende blokke visuelt, vil vi starte en ny række, som vi vil, i dette tilfælde når farven skifter. Vi kunne bruge enten overløbs- eller nem rydningsmetode, hvis hver af farvegrupperne havde et overordnet element. Eller vi bruger den tomme div-metode imellem hver gruppe. Tre indpakningsdeler, der ikke tidligere eksisterede, eller tre efter divs, der ikke tidligere eksisterede. Jeg vil lade dig bestemme, hvad der er bedre.

Problemer med flyder

Flyder bliver ofte slået på for at være skrøbelige. Størstedelen af ​​denne skrøbelighed kom fra bugs i IE6 og IE7. Da disse browsere falmer ind i fortiden, falmer disse fejl sammen med dem. Men det er stadig værd at forstå dem, hvis du nogensinde har brug for fejlretning af en "OldIE".

  • Pushdown er et symptom på, at et element inde i et svævet element er bredere end selve svømmeren (typisk et billede). De fleste browsere gengiver billedet uden for svømmeren, men den del, der stikker ud, påvirker ikke andet layout. Gamle versioner af IE udvidede flyderen til at indeholde billedet, hvilket ofte påvirker layoutet drastisk. Et almindeligt eksempel er et billede, der stikker ud af hovedindholdet, skub sidebjælken nedenunder.

    Hurtig løsning: Sørg for, at du ikke har nogen billeder, der gør dette, brug det overflow: hidden;til at afskære overskydende.

  • Double Margin Bug - En anden ting at huske, når du beskæftiger dig med IE 6 er, at hvis du anvender en margen i samme retning som float, vil den fordoble margenen. Hurtig løsning: indstil display: inlinepå flyderen, og rolig, det forbliver et element på blokniveau.
  • Den 3px Jog er, når tekst, der er op ved siden af en flød element er mystisk sparket væk af 3px ligesom en underlig kraftfeltet omkring svømmeren. Hurtig løsning: Indstil en bredde eller højde på den berørte tekst.
  • I IE 7 var den nederste margenfejl, når en flydende forælder har flydende børn inde i den, ignoreres nederste margen på disse børn af forældrene. Hurtig løsning: Brug bundpolstring på forælderen i stedet.

Alternativer

Hvis du har brug for tekstindpakning omkring billeder, er der virkelig ikke nogen alternativer til float. Når vi taler om det, så tjek denne ret smarte teknik til at pakke tekst omkring uregelmæssige former. Men for sidelayout er der bestemt valg. Eric Sol har en artikel om A List Apart, Faux Absolute Positioning, der beskriver en meget interessant teknik, der på mange måder kombinerer fleksibiliteten i floats med styrken ved absolut positionering.

CSS3 tackler sidelayout et par måder:

  • Flexbox
  • Layout med flere søjler
  • Gitterlayout

Absolut placerede floats (f.eks. Placerer du absolut som normalt, men elementet er stadig i stand til at påvirke andre elementer, som f.eks. Hvis tekst er pakket rundt om det) blev diskuteret, men jeg tror, ​​at ideen blev lagt på grund af ligheder med andre mere robuste layoutideer.

Video

Jeg lavede en screencast for et stykke tid tilbage, hvor jeg forklarede mange af disse float-koncepter.

Relaterede

  • clear
  • position

Mere information

  • float i W3C-specifikationen
  • float ved MDN

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Alle Alle Alle Alle Alle Alle Alle