CSS Floats Forklaret i 5 Spørgsmål

CSS "Floats" (flydende elementer) er nemme at bruge, men når det er brugt, har effekten på elementerne omkring det nogle gange uforudsigelige. Hvis du nogensinde har stødt på problemerne med at forsvinde i nærheden af elementer eller flydende floder, der peger ud som en øm tommelfinger, bekymre dig ikke mere.

Dette indlæg dækker fem grundlæggende spørgsmål, der hjælper dig med at blive ekspert på flydende elementer.

Hvilke elementer flyder ikke?
Hvad sker der med et element, når det flyder?
Hvad sker der med søskende af "Floats"?
Hvad sker der med en forælder til en "Float"?
Hvordan fjerner du "Floats"?

For læsere, der tilføjer TL; dr tilgang til livet, er der et resumé nær slutningen af posten.

1. Hvilke elementer flyder ikke?

en absolut eller fast positioneret element vil ikke flyde. Så næste gang du støder på en float, der ikke virker, skal du kontrollere om den er i position: absolut eller position: fast og anvend ændringer i overensstemmelse hermed.

2. Hvad sker der med et element, når det flyder?

Når et element er mærket "float" kører det til enten venstre eller højre i det væsentlige indtil det rammer væggen af dens beholderelement. Alternativt vil det løbe indtil det rammer et andet flydende element, der allerede har ramt den samme væg. De fortsætter med at hakke side om side, indtil rummet går tomt, og nyere indkommende bliver flyttet ned.

Flydende elementer også vil ikke gå over elementerne Før det i koden, skal du overveje, inden du koder en “Flyde” efter et element til den side, hvor du vil flyde den.

Her er to ting, der skyldes et flydende element, afhængigt af hvilken type element der holdes flydende:

(1) Et inlineelement bliver til et blokniveauelement når flydede.

Nogensinde spekulerede på, hvorfor du pludselig kan tildele højde og bredde til en flydende span? Det er fordi alle de elementer, der flyder, får værdien blok for dets Skærm attribut (inline-tabel vil få bord) gør dem blok niveau elementer.

(2) Et blokelement af uspecificeret bredde vil krympe for at passe til dets indhold, når det flyder.

Normalt, når du ikke angiver bredden til et blokelement, er bredden standard 100%. Men når det flyder, er det ikke mere tilfældet; blokelementets kasse vil krympe, indtil indholdet forbliver synligt.

3. Hvad sker der med søskende af "floats"?

Når du beslutter dig for at flyde et element blandt en flok elementer ikke bekymre dig om, hvordan det vil opføre sig, vil dets adfærd være forudsigelig og vil enten flytte til venstre eller højre. Hvad du virkelig bør tænke på er hvordan søskende efter det vil opføre sig.

"Floats" har de mest omsorgsfulde og lydige senere søskende i hele verden. De vil gøre alt i deres magt for at rumme et flydende element.

Det tekst og inline elementer vil simpelthen gøre plads til "Floats" og vil omslutte "Float" når den er i position.

Det blokelementer vil gå et skridt videre og vil pakke sig om en "float" generøst, selvom det betyder at sparke deres egne barnelementer for at skabe plads til "Float".

Lad os tjekke dette ud i et eksperiment. Nedenfor er en blå boks, og efter det er der en rød kasse af samme størrelse med nogle barnelementer.

Lad os nu flyde den blå boks og se hvad der sker med den røde kasse og dens børn.

Alt bliver fint, når den røde boks stopper med at omfavne den blå boks og for det, du kan bruge overflow: hidden.

Når du tilføjer overflow: hidden til et element, der har pakket en float, vil det stoppe med at gøre det. Se nedenfor, hvordan den røde boks opfører sig med overflow: hidden.

4. Hvad sker der med en forælder til en "Float"?

Forældre er ligeglad med deres "Float" -børn, bortset fra at de ikke skal gå ud af deres venstre eller højre grænser.

Et blokelement af uspecificeret højde øger typisk sin højde for at rumme sine barnelementer, men det er ikke tilfældet for "Float" børn. Hvis en "Float" -størrelse stiger, vil dens forælder ikke øge dens højde i overensstemmelse hermed. Dette igen kan løses ved at bruge overflow: hidden i forældrene.

5. Sådan slettes "Floats"?

Jeg har allerede nævnt at bruge overflow: hidden for at gøre en forælder højhygiejnisk plads til et flydende barn, samtidig med at man skaber det rigtige rum for andre elementer efter "Float" og at stoppe søskende fra at indpakke "Floats.

Og det er sådan, hvordan du laver et element i nærheden af en "Float" uden kompromiser.

Der er en anden metode, hvor elementerne ikke engang vil være overalt i nærheden af deres "Float" søskende. Ved at bruge klar attributt du kan gøre et element fri for at være i nærheden af en "float".

clear: left; klare: højre; klare: begge;

venstre værdi sletter alle "Floats" til venstre for elementet og omvendt for ret, og på begge sider for begge. Dette klar attribut kan bruges på en søskende, tom div eller på pseudo-element som det passer dig.

Resumé

Absolutte / faste elementer vil ikke flyde.
En "Float" går ikke over elementet Før det i koden.
Hvis der ikke er plads nok i beholderen, vil en "Float" blive skubbet ned.
Alle "Floats" er lavet til blokniveau elementer.
Hvis bredden ikke er angivet på en "Float", vil den krympe for at passe til indholdet.
De senere søskende af en "Float" vil enten omgive dem (inline og tekst) eller indpakke dem (blokke).
For at stoppe et element fra at indpakke en "Float", brug overflow: hidden.
Forældrene til en "Float" s ville ikke øge sin højde for at passe float.
For at få en forælder til at øge sin højde som i "Float", brug overflow: hidden (eller lav en tom søskende med klar efter det)
For at forhindre et element i nærheden af nogen "Float" skal du bruge klar attribut.