Flyta - CSS-tricks

Den floategendom i CSS används för positionering och layout på webbsidor.

.module ( float: left; )

Värden

• none: elementet flyter inte. Detta är det ursprungliga värdet.
• left: flyter elementet till vänster om sin behållare.
• right: flyter elementet till höger om sin behållare.
• inherit: elementet ärver flottans riktning för sin förälder.

Obs! Ett element som är flytande sker automatiskt display: block;

Vad betyder float?

För att förstå syftet och ursprunget floatkan vi se till att trycka design. I en utskriftslayout kan bilder ställas in på sidan så att texten lindas runt dem efter behov. Detta kallas vanligtvis och på lämpligt sätt "text wrap". Här är ett exempel på det.

I sidlayoutprogram kan rutorna som innehåller texten uppmanas att respektera textomslaget eller ignorera det. Att ignorera textomslaget låter orden flyta rakt över bilden som om den inte ens var där. Det här är skillnaden mellan att bilden är en del av flödet på sidan (eller inte). Webbdesign är mycket lika.

I webbdesign är sidelement med CSS- floategenskapen applicerade på dem precis som bilderna i utskriftslayouten där texten flyter runt dem. Flytande element förblir en del av webbsidans flöde. Detta skiljer sig tydligt från sidelement som använder absolut positionering. Absolut placerade sidelement tas bort från flödet på webbsidan, som när textrutan i utskriftslayouten fick uppmanas att ignorera sidomslaget. Absolut placerade sidelement påverkar inte positionen för andra element, och andra element påverkar inte dem, oavsett om de rör varandra eller inte.

Demo

Denna demo visar en artikel med två bilder: en inställd på float: leftoch en inställd på float: right. Tryck på knappen "växla flottör" för att växla flottören av och på.

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

Flyter för layout

Bortsett från det enkla exemplet att lägga in text runt bilder, kan floats användas för att skapa hela webblayouter .

Floats är också bra för layout i mindre fall. Ta till exempel det här lilla området på en webbsida. Om vi ​​använder floatför vår avatarbild, när bilden ändrar storlek kommer texten i rutan att återflödas för att rymma den:

Samma layout kan uppnås med relativ positionering på containern och absolut positionering på avataren också. Men när det är gjort på det sättet skulle texten inte påverkas av avataren och skulle inte kunna reflektera över en storleksförändring.

Demo

Denna demo visar en avatar med float: lefttillämpad. Tryck på knappen "växla bildstorlek" för att se en bredare version av avatarbilden. Observera att texten flödar för att rymma bilden istället för att springa över bilden.

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

Rensa flottören

Floats systerfastighet är clear. Ett element som har clearegenskapen inställd kommer inte att röra sig upp intill flottören som flottören önskar, utan kommer att flytta sig ner förbi flottören. Återigen är en illustration mer användbar än ord:

I exemplet ovan flyter sidofältet till höger och är kortare än huvudinnehållsområdet. Sidfoten måste sedan hoppa upp i det tillgängliga utrymmet som krävs av flottören. För att åtgärda detta problem kan sidfoten rensas för att säkerställa att den förblir under båda de flytande kolumnerna.

#footer ( clear: both; )

Clear har också fyra giltiga värden. Värdet bothanvänds oftast, vilket rensar flottör från båda riktningarna. Värdena leftoch rightkan användas för att bara rensa flottören från en riktning respektive. Det ursprungliga värdet är none, vilket vanligtvis är onödigt såvida det inte används för att uttryckligen ta bort ett clearvärde som har ställts in. Värdet inheritfår elementet att ärva sitt överordnade clearvärde. Konstigt nog stötte Internet Explorer inte detta värde förrän IE8.

Att rensa endast lefteller rightflyta, även om det är mindre vanligt i naturen, har definitivt sina användningsområden.

Den stora kollapsen

En av de mer förvirrande sakerna med att arbeta med flottörer är hur de kan påverka det element som innehåller dem (deras "överordnade" element). Om ett överordnat element bara innehåller flytande element, kollapsar dess höjd till ingenting. Detta är inte alltid uppenbart om föräldern inte innehåller någon visuellt märkbar bakgrund, men det är viktigt att vara medveten om.

Så kontraintuitivt som att kollapsa kan verka är alternativet värre. Tänk på detta scenario:

Om blockelementet ovanpå skulle utvidgas automatiskt för att rymma det flytande elementet skulle vi få ett onaturligt avståndsavbrott i textflödet mellan stycken, utan något praktiskt sätt att fixa det. Om så var fallet skulle vi designers klaga mycket hårdare på detta beteende än vad vi kollapsar.

Att kollapsa måste nästan alltid hanteras för att förhindra konstig layout och webbläsarproblem. Vi fixar det genom att rensa flottören efter de flytande elementen i behållaren men innan containern stängs.

Tekniker för att rensa flottörer

Om du befinner dig i en situation där du alltid vet vad det efterföljande elementet kommer att bli kan du använda clear: both;värdet på det elementet och gå vidare med ditt företag. Detta är perfekt eftersom det inte kräver några snygga hack och inga ytterligare element som gör det perfekt semantiskt. Naturligtvis fungerar saker inte vanligtvis så och vi måste ha fler verktyg för att rensa flytande i vår verktygslåda.

• Den tomma div-metoden är bokstavligen en tom div. . Ibland ser du ett
element eller något annat slumpmässigt element som används, men div är det vanligaste eftersom det inte har någon webbläsarstyling, inte har någon speciell funktion och det är osannolikt att det generiskt utformas med CSS. Denna metod föraktas av semantiska purister, eftersom den inte har någon kontextuell betydelse för sidan och endast finns för presentation. Naturligtvis, i strikt mening, har de rätt. Men det gör jobbet gjort och skadar ingen.
• Metoden för överflöd är beroende av att du ställer in overflowCSS-egenskapen på ett överordnat element. Om den här egenskapen är inställd på autoeller hiddenpå det överordnade elementet kommer föräldern att expandera för att innehålla flottörerna, vilket rensar den effektivt för efterföljande element. Denna metod kan vara vackert semantisk eftersom den kanske inte kräver ytterligare element. Men om du befinner dig att lägga till en ny divbara för att tillämpa detta är det lika un-semantiskt som den tomma divmetoden och mindre anpassningsbar. Tänk också på att överflödsegenskapen inte är specifikt för att rensa flottörer. Var noga med att inte dölja innehåll eller utlösa oönskade rullningslister.
• Den enkla rensningsmetoden (annars känd som “clearfix”) använder en smart CSS-pseudoväljare ( :after) för att rensa flottör. I stället för att ställa in överflödet på föräldern tillämpar du en extra klass som "clearfix" på den. Tillämpa sedan den här CSS:

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

  Detta kommer att tillämpa en liten bit av innehåll, dolt från vyn, efter det överordnade elementet som rensar flottören. Det här är inte helt hela historien, eftersom ytterligare kod måste användas för att rymma för äldre webbläsare. Obs! Se även detta utdrag som håller reda på det senaste och bästa i clearfixes, inklusive den nyare "micro clearfix."

Olika scenarier kräver olika flytningsmetoder. Ta till exempel ett rutnät av block, var och en av olika typer.

För att bättre ansluta liknande block visuellt vill vi starta en ny rad som vi vill, i det här fallet när färgen ändras. Vi kunde använda antingen överflödet eller den enkla rensningsmetoden om var och en av färggrupperna hade ett överordnat element. Eller så använder vi den tomma div-metoden mellan varje grupp. Tre inslagningsdelar som inte fanns tidigare eller tre efter divs som inte existerade tidigare. Jag låter dig bestämma vilken som är bättre.

Problem med Floats

Flottor blir ofta misshandlade för att vara ömtåliga. Majoriteten av denna bräcklighet kom från buggar i IE6 och IE7. När dessa webbläsare bleknar in i det förflutna bleknar dessa buggar tillsammans med dem. Men det är fortfarande värt att förstå dem om du någonsin behöver felsöka en "OldIE".

• Pushdown är ett symptom på att ett element i ett flytande föremål är bredare än själva flottören (vanligtvis en bild). De flesta webbläsare återger bilden utanför flottören, men inte den del som sticker ut påverkar andra layouter. Gamla versioner av IE utvidgade flottören till att innehålla bilden, vilket ofta påverkade layouten drastiskt. Ett vanligt exempel är en bild som sticker ut från huvudinnehållet och skjuter sidofältet nedanför.
  

  

  Snabbfix: Se till att du inte har några bilder som gör detta, använd för overflow: hidden;att skära bort överflöd.

• Double Margin Bug - En annan sak att komma ihåg när du hanterar IE 6 är att om du använder en marginal i samma riktning som flottören, kommer den att dubbla marginalen. Snabbfix: sätt display: inlinepå flottören, och oroa dig inte, det förblir ett element på blocknivå.
• Den 3px Jog är när text som är upp bredvid en flutit element mystiskt sparkade bort av 3px som en konstig kraftfält runt flottören. Snabbfix: ställ in en bredd eller höjd på den berörda texten.
• I IE 7 var bottenmarginalfelet när en flytande förälder har flyttat barn inuti den, ignoreras bottenmarginalen på dessa barn av föräldern. Snabbkorrigering: använder bottenvaddning på föräldern istället.

Alternativ

Om du behöver textlindning runt bilder finns det verkligen inga alternativ för float. På tal om det, kolla in den här ganska smarta tekniken för att lägga in text runt oregelbundna former. Men för sidlayout finns det definitivt val. Eric Sol har en artikel om A List Apart, Faux Absolute Positioning, som beskriver en mycket intressant teknik som på många sätt kombinerar flottörernas flexibilitet med styrkan i absolut positionering.

CSS3 hanterar sidlayout på ett par sätt:

• Flexbox
• Layout med flera kolumner
• Rutnätslayout

Absolut placerade flottörer (t.ex. att du absolut positionerar som normalt, men elementet kan fortfarande påverka andra element, som att ha textomslag runt det) diskuterades, men jag tror att idén lagrades på grund av likheter med andra mer robusta layoutidéer.

Video

Jag gjorde en screencast för ett tag sedan och förklarade många av dessa float-koncept.

Relaterad

• clear
• position

Mer information

• float i W3C-specifikationen
• float vid MDN

Webbläsarstöd

Krom	Safari	Firefox	Opera	IE	Android	iOS
Allt	Allt	Allt	Allt	Allt	Allt	Allt