Vad gör flottor verkligen ändå? Hur påverkar de boxmodellen för de involverade elementen? Hur skiljer sig flytande element från inline-element? Vilka är de specifika reglerna för placeringen av flytande element? Hur fungerar den klara fastigheten och vad är det för?
Floats kan resa upp även erfarna utvecklare och förstå deras beteende kan verkligen göra dig fri från många av de woes som du möter med CSS. Även om du tror att du redan vet allt om flottor, dyker vi djupt nog att du bara kan lära dig något nytt!
Vad är en flottör?
Vissa element i CSS är blocknivåelement, vilket innebär att de automatiskt startar en ny rad. Om du till exempel skapar två enkelsegmentelement, flyter de inte in i varandra, men kommer att visas på separata rader. Andra element är inline-element. Det betyder att de visas? I linje? med föregående innehåll. Ett exempel är en ankare-tagg, som kan förekomma inom ett annat element, till exempel en paragraf utan att orsaka någon extra blankytor eller nya linjer.
Ett sätt att fuska denna modell av layout är att använda floats, vilket gör det möjligt för ett visst element att flytta till ena sidan av sin rad och ha annat innehållsflöde nerför sidan. Ett högerflödeelement kommer att skjutas hela vägen till höger om behållaren och ha innehållsflöde neråt på vänster sida och ett vänsterflöjt element kommer att skjutas hela vägen till vänster med innehåll som strömmar längs dess högra sida.
Det klassiska exemplet är när du kasta en bild med ett stycke och vill att de två ska visas sida vid sida istället för staplade. Först skapar vi båda elementen med lite HTML:
Med den här koden på plats, scootes vår bild till höger om dess linje och stycket får strömma ner på vänster sida. Klicka här eller på bilden nedan för att se och justera ett liveexempel på denna kod i åtgärd.
En intressant sak om uppförandet av denna bild nu när den är flytande är att vårt andra innehåll faktiskt kommer att försöka sätta om det där det är möjligt. Om vi ändrar storleken på behållaren eller webbläsarfönstret, blir texten enklare så att den aldrig rör bilden.
Hur rutan fungerar
Odds förstår du redan detta beteende i en anständig examen. För att kunna flyta ordentligt måste du förstå hur dessa två element påverkar på djupare nivå. Till exempel, hur lägger vi till extra marginal mellan stycket och bilden? Du kanske tror att detta kommer att fungera:
Detta kommer dock inte att lägga till en enda pixel extra utrymme mellan bilden och stycket. Istället måste vi tillämpa vår marginal på bilden:
Frågan du borde fråga dig själv är, varför ?? Varför skulle inte ökningen av styckemarginalen öka utrymmet mellan bilden och stycket? Anledningen till detta är att vi inte fattar boxmodellen som den hänför sig till den punkten.
Om du någonsin tvivlar på hur din layout fungerar på en grundläggande nivå, försök att applicera en gräns eller två för att se vad som händer. Om vi använder denna teknik på stycket kan resultatet överraska dig.
Som du kan se är bilden faktiskt inne i styckets ruta! Detta löser vår marginal gåta. Vilken marginal som vi lägger till i stycket appliceras långt bort till höger om bilden, det är därför det inte ökar utrymmet mellan bilden och stycket.
Om vi ville ha ändrat detta beteende så att stycket inte sätter sig runt bilden kunde vi flytta stycket till vänster och ge den en viss bredd (utan att uttrycka bredden, stycket är 100% bred och passar inte bredvid bilden).
Crazy Float Rules
Nu vet vi vad en flottör är och hur den påverkar lådorna av de element som är inblandade. Låt oss gå vidare till en annan information som många utvecklare förmodligen inte förstår åtminstone: de regler som styr ett flytande elements position.
Det är ofta fallet att utvecklare använder floats för att styra placeringen av listobjekt, kanske i ett bildgalleri eller funktionslista. Låt oss se hur det här fungerar genom att skapa en enkel lista full av bilder.
Till att börja med är det här exemplet annorlunda i det faktum att bilderna standardiserar ett tillstånd att vara vertikalt inriktad längs sina nedre kanter. Detta får dem att se ganska annorlunda än vårt tidigare exempel, men vi kan fixa det här med en enda rad CSS.
Nu börjar vi se mycket ut som float-exemplet. Endast visning av listobjekten inline har en mycket mer förutsägbar staplingsordning. När det inte finns något rum på x-axeln för nästa objekt, börjar det tillbaka på den vänstra bilden i nästa rad.
Så varför fungerar inte vårt flytande bildgalleri så här? Vilken märklig voodoo reglerar flytande föremål?
Översättning krävs
Det visar sig att CSS-specifikationen beskriver en lista med nio regler som styr floats beteende. Problemet med denna lista är dock att det var skrivet så att bara advokater och andra tråkiga människor kan förstå det. Här är ett direkt citat från en av reglerna:
? Om den aktuella rutan är flytande, och det finns några vänstra flytande lådor som genereras av element tidigare i källdokumentet, måste för varje sådan tidigare låda antingen den vänstra ytterkanten av den aktuella rutan vara till höger om höger ytterkant av den tidigare rutan, eller dess topp måste vara lägre än botten av den tidigare rutan. Analoga regler håller för högra flytande lådor.?Kanske är din läsförståelse högre än min, men det här och de andra reglerna i listan gjorde att mitt huvud snurrar. Allt detta tal om den vänstra ytterkanten till höger om den högra ytterkanten är faktiskt ganska grundläggande saker klädd för att låta komplicerat. För att göra saker enklare, här är Josh Johnsons nio regler för flytande beteende, översatt till engelska för din bekvämlighet.
- Flytande element drivs till kanten av behållarna, inte längre.
- Alla floated-element kommer antingen att visas bredvid eller under ett tidigare flytande element. Om elementen flyttas till vänster visas det andra elementet till höger om det första. Om de floats rätt, kommer det andra elementet att visas till vänster om det första.
- En vänster-flytande låda kan inte vara längre än en höger-flytande låda.
- Flytande element kan inte gå högre än behållarens övre kant (det blir mer komplicerat när kollapsande marginaler är inblandade, se originalregeln).
- Ett flytande element kan inte vara högre än en tidigare blocknivå eller ett flytande element.
- Ett flytande element kan inte vara högre än en tidigare rad inline-element.
- Ett flytande element bredvid ett annat flytande element kan inte sticka ut förbi behållarens kant.
- En flytande låda måste placeras så hög som möjligt. (Ingen översättning behövs)
- En vänstra flytande låda måste placeras så långt åt vänster som möjligt, en högerflytande låda så långt till höger som möjligt. En högre position föredras över en som ligger längre till vänster / höger. (Ingen översättning behövs)
Här kan vi se att många av dessa är ganska mycket sunt förnuft, men de måste uttryckligen anges så att varje person och webbläsare är på samma sida. I grunden är läget av situationen att de flytande elementen går upp till den angivna kanten (vänster eller höger), men inte längre. Om det inte finns en annan flytande del före den, så går det bara bredvid den.
Den verkliga överraskningen som förvirrade oss förut kommer i reglerna i slutet, vilket säger att de flytande elementen försöker hålla sig så höga som möjligt och att denna vertikala positioneringsregel har företräde framför den horisontella vänster / höger flytande regeln som skjuter ett föremål till en kant .
I vårt tidigare exempel sträckte bildnummer två linjens höjd ner så att efter bild nummer tre var det fortfarande något vertikalt utrymme för bild nummer fyra att klämma in i. Även med dessa regler i åtanke är mönstret inte alltid lätt att förutsäga.
Tänk bara på att när du har ett flytande element, De nästa flytande elementen bakom den kommer att ta upp åtminstone samma mängd vertikalt utrymme eller mer innan du bryter mot linjen och går lägre i flödet.
Float Order
En sista anmälan om de regler som vi lagt fram här. Den andra regeln har några intressanta konsekvenser för ordningen för objekt som floats. Låt oss säga att vi återigen har en lista med bilder numrerade en till sex, så här:
Vad den här koden gör är att berätta för webbläsaren om att toppen av det andra listobjektet måste ligga under botten av eventuella vänstra flytande objekt före det (i det här fallet det första listobjektet). Om vi hade alla float alla dessa element till höger, skulle vi ha haft att använda ? klart: rätt? istället.
Observera att efter det här kvarstår resten av de flytande föremålen. Det beror på att de fortfarande är inställda att flyta till vänster, den klara egendomen avbryter inte detta på något sätt. Det betyder att vårt problem med stycket inte är fixat genom att rensa någon av listobjekten.
Istället måste det hända att styckeelementet, som är ett blocknivåelement som inte har floats, måste rensas. Detta kommer att se till att det visas under de flytande elementen istället för bredvid dem.
Vi behövde tekniskt bara en vänster klar här, men när en utvecklare vill vara säker på att rensa alla flottor är det vanligt att se både värde som används. Denna förändring fixade vårt problem snyggt!
Float Quirks och Clear Fixes
Det finns en särskild handling som äger rum när ett visst element innehåller endast flytande element: moderelementets höjd sammanfaller. För att illustrera detta, låt oss säga att vi ville lägga en bakgrundsfärg på den oordnade listan som vi använder i alla våra exempel. Om elementen i listan inte floats, behöver vi bara använda färgen till bakgrunden med hjälp av CSS.
Som du kan se i exemplet nedan har rutan som definierar den oordnade listan blivit grå och listobjekten är staplade ovanpå varandra.
Men den andra som vi flyter de här listobjekten, den UL innehåller bara flytande element, och så dess höjd kollapser, vilket ger en nybörjareutvecklare undra vad det hände med sin bakgrundsfärg.
Det finns ett antal sätt att lösa detta problem. Den enklaste och mest enkla lösningen är att helt enkelt tillämpa en explicit höjd på moderelementet, vilket är den oordnade listan.
Som du kan se gav detta oss verkligen vår bakgrundsfyllning. Detta är dock sällan den önskvärda kursen att ta helt enkelt eftersom det är mer praktiskt i det långa loppet om höjden automatiskt beräknas utifrån innehållet. Om vi lägger till ytterligare tre rader av bilder på vår lista, kommer den höjden inte att vara tillräcklig.
Clearfix till räddningen
Det är här termen? Clear fix ,? också skrivet? clearfix ,? kommer i spel. Clearfixes adresserar detta problem med kollapshöjd traditionellt genom användningen av klar fast egendom.
Vilka utvecklare brukade göra är att skapa ett tomt element (ofta en div) i deras HTML på samma nivå som de flytande objekten och tillämpa sedan en klass av? Clearfix? till den tomma behållaren. Tillbaka i CSS, skulle du då lägga till flotta på? Clearfix? fast egendom.
Detta fixar omedelbart problemet med kollapsad höjd:
Med tanke på vad vi redan har lärt oss vet vi exakt varför det här tricket fixade vårt problem. Anledningen till att höjden hade kollapsat är att föräldern bara innehöll flytande barn. Nu har det ett barn, om än en tom, som inte floats, så autohöjden fungerar som förväntat igen.
Problemet med den här metoden är att ingen tyckte om det extra fula elementet i HTML. Det var helt enkelt inte semantiskt, vilket innebar att det inte hjälpte till att kommunicera den tydliga hierarkin på sidan.
Den nya fina lösningen för detta problem är att dra nytta av svämma över egendom som reglerar funktionaliteten för innehåll som sträcker sig utanför gränserna för dess innehållande lådor. Det visar sig att om du sätter överflöd till dold eller bil På föräldraobjektet fixar det höjden!
Detta är definitivt den kortaste och mest eleganta lösningen för att lösa problemet med kollapsande höjd och bör gå till strategin. Med det sagt kommer det att finnas fall där du vill att överflödet av ett element ska ställas in synlig, vad ska du göra då?
Svaret är att använda Nick Gallaghers Micro Clearfix Hack, som använder något genius CSS för att åtgärda problemet. För det första använder den: före och: efter att lägga till något innehåll som vi kan använda för att skapa något i föräldern som inte floats. Men du vill verkligen inte ha något innehåll här, så vi lämnar det tomt men ställer in displayen till bordet för att skapa en anonym cell (tom och tar ingen plats) och slutligen använda vår gamla vänklara. Detta skapar det osynliga blocknivåobjektet som vi behöver för att fixa höjdsackumuleringen utan extra HTML-markup. Äldre versioner av IE kräver sin egen fix så det här kastas också.
Slutsats
I den här artikeln gick vi över en ton av stor information, både grundläggande och komplicerad. Vi började med en diskussion om hur floats är och hur de fungerar på en grundläggande nivå och fortsatte sedan med hur inställning av ett element för att flyta påverkar de kringliggande delarna av de involverade elementen så att du kan räkna ut hur du får dina marginaler att fungera som du vill att de ska.
Därefter flyttade vi på de grundläggande reglerna som styr positionen för ett flytande element och kom fram till några intressanta slutsatser för hur flytande element av varierande höjder kommer att placeras, liksom hur rätt flytande föremål uppträder i omvänd ordning.
Slutligen lagde vi tydligt hela berättelsen om hur en förälder som bara innehåller flytande barn kommer att ha en kollapsad höjd och hur du kan lösa det baserat på ditt specifika scenario.
Om floats var något som förvirrade dig innan du läste den här artikeln, gå med i klubben. De förvirrar oss alla först. Förhoppningsvis, även om du nu har en enastående kunskap om hur flottor fungerar och hur du kan använda dem för att uppnå vilken layout du vill ha. Lämna en kommentar nedan och meddela om du hittade den här informationen till hjälp.