CSS Floats uitgelegd in 5 vragen

CSS "Floats" (zwevende elementen) zijn eenvoudig te gebruiken, maar eenmaal gebruikt, wordt het effect ervan op de elementen eromheen soms onvoorspelbaar. Als je ooit problemen hebt ondervonden bij het verdwijnen van nabije elementen of drijvers die eruit steken als een pijnlijke duim, maak je dan niet meer ongerust.

Dit bericht behandelt vijf basisvragen die je zullen helpen expert te worden in zwevende elementen.

1. Welke elementen zweven niet?
2. Wat gebeurt er met een element wanneer het drijft?
3. Wat gebeurt er met de broers en zussen van "Floats"?
4. Wat gebeurt er met een ouder van een "Float"?
5. Hoe wis je "drijvers"?

Voor lezers die optellen, is er een samenvatting aan het einde van de post.

1. Welke elementen zweven niet?

Een absoluut of vast gepositioneerd element zal niet drijven. Dus controleer de volgende keer dat je een vlotter tegenkomt die niet werkt positie: absolute of position: fixed en dienovereenkomstig wijzigingen aanbrengen.

2. Wat gebeurt er met een element wanneer het drijft?

Wanneer een element 'zwevend' is gelabeld, loopt het in principe tot aan het linker of het rechter einde raakt de wand van het containerelement. Als alternatief, zal het draaien totdat het raakt een ander zwevend element dat al op dezelfde muur is geraakt. Ze blijven naast elkaar opstapelen totdat de ruimte opraakt en nieuwere binnenkomende naar beneden worden verplaatst.

Drijvende elementen ook zal niet boven de elementen uitkomen voor het in de code, iets dat u moet overwegen voordat u codeert “Vlotter” na een element aan de zijkant waarvan je het wilt laten zweven.

Hier volgen nog twee dingen die met een zwevend element gebeuren, afhankelijk van welk type element zwevend wordt gehouden:

(1) Een inline element verandert in een element op blokniveau wanneer dreef.

Heb je je ooit afgevraagd waarom je opeens hoogte en breedte kunt toewijzen aan zwevend span? Dat komt omdat alle elementen wanneer ze drijven, de waarde krijgen blok voor zijn tonen kenmerk (inline-table zal krijgen tafel) waardoor ze levelelementen blokkeren.

(2) Een blokelement met een niet-gespecificeerde breedte zal krimpen om in de inhoud te passen als het wordt gedreven.

Gewoonlijk, wanneer u geen breedte opgeeft voor een blokelement, is de breedte ervan de standaard 100%. Maar als het zweeft, is dat niet meer het geval; het blok van het blokelement krimpt totdat de inhoud zichtbaar blijft.

3. Wat gebeurt er met de broers en zussen van "Floats"?

Wanneer je besluit om een ​​element onder een groep elementen te laten zweven, maak je dan geen zorgen over hoe het zich zal gedragen, zijn gedrag is voorspelbaar en zal naar links of rechts bewegen. Waar je echt aan zou moeten denken is hoe de broers en zussen erna zich gaan gedragen.

"Floats" hebben de meest zorgzame en gehoorzame latere broers en zussen in de hele wereld. Ze zullen er alles aan doen om een ​​zwevend element te accommoderen.

De tekst en inline elementen zal gewoon plaats maken voor de "Drijvers" en de "zweven" omringen wanneer het in positie is.

De blok elementen gaat een stap verder en zal wikkel zichzelf rond een "Float" genereus, zelfs als het betekent het uitschoppen van hun eigen kindelementen om ruimte te maken voor de "Float".

Laten we dit eens bekijken in een experiment. Hieronder ziet u een blauw vak en een rood vak van dezelfde grootte met enkele onderliggende elementen.

Laten we nu de blauwe doos zweven en kijken wat er gebeurt met de rode doos en zijn kinderen.

Alles komt goed als het rode vak stopt met het omarmen van het blauwe vak en daarvoor kunt gebruiken overloop verborgen.

Wanneer u toevoegt overloop verborgen naar een element dat een float heeft ingepakt, stopt het daarmee. Zie hieronder hoe het rode kader zich gedraagt overloop verborgen.

4. Wat gebeurt er met een ouder van een "Float"?

Ouders geven niet veel om hun "Float" -kinderen, behalve dat ze hun linker- of rechtergrenzen niet moeten verlaten.

Doorgaans neemt een blokelement van een niet-gespecificeerde hoogte toe om de onderliggende elementen te accommoderen, maar dat is niet het geval voor Float-kinderen. Als de grootte van een "Float" toeneemt, zal zijn ouder de hoogte niet overeenkomstig verhogen. Dit kan weer worden opgelost door te gebruiken overloop verborgen in de ouder.

5. Hoe "Floats" te wissen?

Ik heb al genoemd gebruiken overloop verborgen een ouder in de hoogte geschikt maken voor een zwevend kind terwijl het de juiste ruimte creëert voor andere elementen na de "zweven" en om te voorkomen dat broers en zussen zich wikkelen "Drijvers.

En zo maak je een element live in de buurt van een "Float" zonder compromissen.

Er is een andere methode waarbij de elementen zelfs niet in de buurt van hun 'Float'-broers en zussen zullen zijn. Door de duidelijk attribuut kun je een element vrij maken van dichtbij een "Float" te zijn.

vrij: links; duidelijk: goed; beiden opschonen; 

links waarde wist alle "zwevend" links van het element en omgekeerd voor rechts, en aan beide kanten voor beide. Deze duidelijk attribuut kan worden gebruikt op een sibling, lege div of op pseudo-element volgens uw handige.

Samenvatting

1. Absolute / Vaste elementen zweven niet.
2. Een "Float" gaat niet boven het element voor het in de code.
3. Als er niet voldoende ruimte in de container is, wordt er een "Float" ingedrukt.
4. Alle "zwevende elementen" worden op blokniveau-elementen gemaakt.
5. Als er geen breedte is opgegeven in een "zwevend", wordt deze verkleind zodat deze in de inhoud past.
6. De latere broers en zussen van een "Float" zullen ze omsingelen (inline en tekst) of ze omwikkelen (blokken).
7. Als u wilt voorkomen dat een element een "Float" wikkelt, gebruikt u overloop verborgen.
8. De ouders van een "Float" zouden de hoogte niet vergroten om in de vlotter te passen.
9. Om een ​​ouder de hoogte te laten maken volgens de "Float", gebruik overloop verborgen (of maak een lege broer of zus met duidelijk daarna)
10. Om te voorkomen dat een element in de buurt van "Float" komt, gebruikt u de duidelijk attribuut.