CSS Floats forklart i 5 spørsmål

CSS "Floats" (flytende elementer) er enkle å bruke, men en gang brukt, har effekten på elementene rundt det noen ganger uforutsigbar. Hvis du noen gang har kommet over problemer med å forsvinne nærliggende elementer eller flyter som pokker ut som en sår tommel, bekymre deg ikke mer.

Dette innlegget dekker fem grunnleggende spørsmål som vil hjelpe deg til å bli ekspert på flytende elementer.

1. Hvilke elementer flyter ikke?
2. Hva skjer med et element når det flyter?
3. Hva skjer med søsken til "Floats"?
4. Hva skjer med en forelder av en "Float"?
5. Hvordan fjerner du "Floats"?

For lesere som legger til TL; dr tilnærming til livet, er det et sammendrag nær slutten av innlegget.

1. Hvilke elementer flyter ikke?

en absolutte eller fast posisjonert element vil ikke flyte. Så neste gang du møter en float som ikke fungerer, sjekk om den er i position: absolute eller stilling: fast og bruk endringer tilsvarende.

2. Hva skjer med et element når det flyter?

Når et element er merket "float", går det til enten venstre eller høyre i utgangspunktet til det treffer veggen av beholderelementet. Alternativt vil det løpe til det treffer et annet flytende element som allerede har rammet samme vegg. De vil fortsette å hakke opp side om side til plassen går ut, og nyere innkommende blir flyttet ned.

Flytende elementer også vil ikke gå over elementene før den i koden, noe du må vurdere før du koder en “Flyte” etter et element til siden du vil flyte på.

Her er to ting som skjer med et flytende element, avhengig av hvilken type element som holdes flytende:

(1) Et inlineelement blir til et blokknivåelement når det ble floppet.

Noen gang lurt på hvorfor plutselig kan du tildele høyde og bredde til flytende span? Det er fordi alle elementene når de flyter vil få verdien blokkere for dens vise Egenskap (inline-tabellen vil få bord) gjør dem blokknivå elementer.

(2) Et blokkelement av uspesifisert bredde vil krympe for å passe til innholdet når det blir flovert.

Vanligvis, når du ikke angir bredde til et blokkelement, er bredden standard 100%. Men når det flyter, er det ikke mer tilfellet; blokkelementets boks vil krympe til innholdet forblir synlig.

3. Hva skjer med søsken av "flyter"?

Når du bestemmer deg for å flyte et element blant en mengde elementer, ikke bekymre deg for hvordan den skal oppføre seg, vil dens oppførsel være forutsigbar og vil enten bevege seg til venstre eller høyre. Det du burde virkelig tenke på er hvordan søsken etter det skal oppføre seg.

"Floats" har de mest omsorgsfulle og lydige senere søsken i hele verden. De vil gjøre alt i deres makt for å imøtekomme et flytende element.

De tekst og inline elementer vil ganske enkelt gjøre plass for "Floats" og vil omgir "Float" når den er i posisjon.

De blokkelementer vil gå et skritt videre og vil vikle seg rundt en "float" sjenerøst, selv om det betyr å sparke ut sine egne barnelementer for å få plass til "Float".

La oss sjekke dette ut i et eksperiment. Nedenfor er en blå boks og etter at den er en rød boks av samme størrelse med noen barnelementer.

La oss nå flyte den blå boksen, og se hva som skjer med den røde boksen og dens barn.

Alt blir bra når den røde boksen slutter å omfavne den blå boksen og for det du kan bruke flow: hidden.

Når du legger til flow: hidden til et element som har pakket inn en flyte, vil det slutte å gjøre det. Se nedenfor hvordan den røde boksen oppfører seg med flow: hidden.

4. Hva skjer med en forelder av en "Float"?

Foreldre bryr seg ikke mye om sine "Float" barn, bortsett fra at de ikke skal gå ut av deres venstre eller høyre grenser.

Vanligvis øker et blokkelement av uspesifisert høyde sin høyde for å imøtekomme sine barnelementer, men det er ikke tilfelle for "Float" barn. Hvis en "Float" -størrelse øker, øker foreldrene ikke høyden tilsvarende. Dette igjen kan løses ved å bruke flow: hidden i foreldrene.

5. Hvordan fjerne "Floats"?

Jeg har allerede nevnt å bruke flow: hidden for å gjøre en forelder høyt tilnærmet et flytende barn, samtidig som det skaper den rette plassen for andre elementer etter "Float" og å stoppe søsken fra å pakke "Floats.

Og det er slik du lager et element i nærheten av en "Float" uten kompromisser.

Det er en annen metode der elementene ikke engang vil være hvor som helst i nærheten av deres "Float" søsken. Ved å bruke klar attributt du kan gjøre et element fri fra å være i nærheten av en "float".

fjern: venstre; klare: høyre; klare: begge; 

venstre verdi sletter alle "Floats" til venstre for elementet, og omvendt for Ikke sant, og på begge sider for både. Dette klar Attributt kan brukes på en søsken, tom div eller på pseudo-element som det passer deg.

Sammendrag

1. Absolutt / Fastelementer vil ikke flyte.
2. En "Float" går ikke over elementet før det i koden.
3. Hvis det ikke er nok plass i beholderen, vil en "Float" bli presset ned.
4. Alle "Floats" er laget til blokkeringselementer.
5. Hvis bredden ikke er spesifisert på en "Float", vil den krympe for å passe innholdet.
6. De senere søskenene til en "Float" vil enten omgir dem (inline og tekst) eller pakke dem (blokker).
7. For å stoppe et element fra å pakke inn en "Float", bruk flow: hidden.
8. Foreldrene til en "Float" s ville ikke øke sin høyde for å passe floaten.
9. For å få en forelder øke sin høyde som i "Float", bruk flow: hidden (eller lag en tom søsken med klar etter det)
10. For å forhindre at et element ligger i nærheten av "Float", bruk klar Egenskap.