CSS Floats förklaras i 5 frågor

CSS "Floats" (flytande element) är enkla att använda men en gång används, har effekten på elementen runt den ibland oförutsägbar. Om du någonsin har stött på problemen med att försvunna närliggande element eller flotta som pekar ut som en öm tumme, oroa dig inte mer.

Det här inlägget täcker fem grundläggande frågor som hjälper dig att bli expert på flytande element.

1. Vilka element flyter inte?
2. Vad händer med ett element när det flyter?
3. Vad händer med syskon av "Floats"?
4. Vad händer med en förälder till en "Float"?
5. Hur rensar du "Floats"?

För läsare som lägger till TL; dr approach till livet finns det en sammanfattning nära slutet av posten.

1. Vilka element flyter inte?

En absolut eller fast positionerat element kommer inte att flyta. Så nästa gång du stöter på en flottör som inte fungerar, kontrollera om den är i position: absolute eller läget: fast och tillämpa ändringar i enlighet därmed.

2. Vad händer med ett element när det flyter?

När ett element är märkt "float" kör det antingen till vänster eller höger i grunden tills det träffar dess behållarelementets vägg. Alternativt kommer det att springa tills det träffar ett annat flytande element som redan har slagit samma vägg. De fortsätter att hoppa upp sida vid sida tills rymden går ut, och nyare inkommande kommer att flyttas ner.

Flytande element också kommer inte att gå ovanför elementen innan Det i koden, något du behöver tänka på innan du kodar a “Flyta” efter ett element till den sida som du vill flyta den.

Här är två saker som händer med ett flytande element beroende på vilken typ av element som hålls flytande:

(1) Ett inlineelement blir till ett blocknivåelement när det floats.

Någonsin undrat varför du plötsligt kan tilldela höjd och bredd till en flytande spänna? Det beror på att alla element när floated kommer att få värdet blockera för dess visa attribut (inline-tabellen kommer att få tabell) gör dem blocknivå element.

(2) Ett blockelement av ospecificerad bredd kommer att krympa för att passa innehållet när det floats.

Vanligtvis, när du inte anger bredd till ett blockelement, är dess bredd standardvärdet 100%. Men när det flyter är det inte mer fallet. Blockelementets låda kommer att krympa tills dess innehåll fortfarande är synligt.

3. Vad händer med syskonen i "floats"?

När du bestämmer dig för att flyta ett element bland en massa element oroa dig inte om hur det kommer att verka, dess beteende kommer att vara förutsägbart och kommer antingen att flytta åt vänster eller höger. Det du borde verkligen tänka på är hur syskon efter det kommer att verka.

"Floats" har de mest omtänksamma och lydiga senare syskon i hela världen. De ska göra allt för att rymma ett flytande element.

De text och inline-element kommer helt enkelt göra plats för "Floats" och kommer att omge "Float" när den är på plats.

De blockelement kommer att gå ett steg längre och vilja vikla sig runt en "float" generöst, även om det innebär att sparka ut sina egna barnelement för att skapa plats för "Float".

Låt oss kolla detta i ett experiment. Nedan finns en blå låda och efter det är en röd låda av samma storlek med några barnelement.

Låt oss nu flyta den blå rutan och se vad som händer med den röda rutan och dess barn.

Allt kommer att vara bra när den röda rutan slutar omfamna den blå rutan och för det du kan använda overflow: hidden.

När du lägger till overflow: hidden till ett element som har förpackat en flottör, kommer det sluta göra så. Se nedan hur den röda rutan beter sig med overflow: hidden.

4. Vad händer med en förälder till en "Float"?

Föräldrar bryr sig inte mycket om sina "Float" -barn, förutom att de inte ska gå ut ur sina vänstra eller högra gränser.

Ett blockelement av ospecificerad höjd ökar typiskt sin höjd för att rymma sina barnelement, men det är inte fallet för "Float" -barn. Om en "Floats" -storlek ökar, ökar inte dess förälder dess höjd i enlighet därmed. Detta igen kan lösas genom att använda overflow: hidden i föräldern.

5. Hur man rensar "Floats"?

Jag har redan nämnt att använda overflow: hidden för att få en förälder höjdvis ta emot ett flytande barn samtidigt som man skapar rätt utrymme för andra delar efter "Float" och att stoppa syskon från att sätta in "Floats.

Och det är så du gör ett element bor nära en "Float" utan kompromisser.

Det finns en annan metod där elementen inte ens kommer att vara någonstans nära deras "Float" syskon. Genom att använda klar attribut du kan göra ett element fritt från att vara nära en "float".

rensa: vänster; rensa: höger; klara: båda; 

vänster värdet rensar alla "Floats" till vänster om elementet och vice versa för höger, och på båda sidor för både. Detta klar attributet kan användas på en syskon, tom div eller pseudo-element enligt ditt praktiska.

Sammanfattning

1. Absoluta / fasta element kommer inte att flyta.
2. En "Float" går inte över elementet innan det i koden.
3. Om det inte finns tillräckligt med utrymme i behållaren, kommer en "Float" att tryckas ner.
4. Alla "Floats" är gjorda i blocknivåelement.
5. Om bredden inte anges på en "Float", krymper den för att passa innehållet.
6. De senare syskonen i en "Float" kommer antingen att omge dem (inline & text) eller omsluta dem (block).
7. För att stoppa ett element från att sätta in en "Float", använd overflow: hidden.
8. Föräldrarna till en "Float" s skulle inte öka sin höjd för att passa flottören.
9. För att få en förälder att öka sin höjd enligt "Float", använd overflow: hidden (eller skapa en tom syskon med klar Efter det)
10. För att förhindra att ett element ligger nära någon "Float" använder du klar attribut.