Lage ein rask og enkel CSS-layout med float
Forklaring
I denne artikkelen viser vi ein del kodedøme som er innbygde frå tenesta Codepen. I desse Codepen-rammene kan du klikke på knappane "HTML" og "CSS" øvst til venstre for å sjå HTML- og CSS-koden som ligg bak. Du kan òg redigere koden og sjå resultatet med ein gong i "Result"-vindauget. Slike endringar vil berre visast lokalt hos deg, så ikkje ver redd for å prøve deg fram og teste ut kode. Viss du klikkar på "Edit on Codepen" eller "Fork on Codepen" øvst til høgre, kan du sjå korleis det ser ut i fullskjerm. Har du ein Codepen-brukar, kan du kopiere koden til din eigen profil og lage din eigen versjon ("fork").
Float er eit attributt i CSS som blir brukt til å få element til å "flyte" ved sida av kvarandre, til dømes for å få bilete til å flyte ved sida av tekst. Du kan sjå eit døme på det i Codepen-ramma over. Om du klikkar på CSS-fana, ser du at i CSS-reglane .bileteTilVenstre og .bileteTilHogre er det brukt float: left og float: right for å få bileta til å flyte til venstre og til høgre for teksten. Om du klikkar på knappen "0.5x" under "Result"-ramma kan du sjå heile layouten på ei side. Då får du ei betre kjensle av korleis elementa er plasserte i forhold til kvarandre.
Float kan brukast for å få heile seksjonar av nettsida til å flyte ved sida av kvarandre, til dømes ein sidemeny.
I dømet over blir det brukt float: left i CSS-reglane nav og main for å få sidemenyen <nav> og hovudinnhaldet <main> til å flyte ved sida av kvarandre. I CSS-koden har nav breidde sett til 35 prosent (width: 35%;), og main har breidde sett til 65 prosent (width: 65%;). Til saman blir dette 100 prosent breidde, som betyr at dei to elementa til saman dekker heile breidda til elementet dei ligg inne i, i dette tilfellet <body>.
Under desse to elementa ligg ein tekst som viser kvar innhaldet i <main> er henta frå. Dette ligg inne i ein <footer>. For å sørge for at <footer> ikkje flyt ved sida av dei andre elementa, men blir plassert for seg sjølv under dei to flytande elementa, må vi legge inn koden clear: left; i CSS-regelen for elementet. Prøv å sjå kva som skjer med botnteksten viss du fjernar denne CSS-regelen.
box-sizing: border-box;
Element som flyt ved sida av kvarandre, kan til saman ha maksbreidde på 100 prosent av elementet dei ligg inne i. Viss breidda blir over 100 prosent, vil elementet lengst til høgre blir lagt på neste ledige plass under dei andre flytande elementa. Dette kan òg skje viss ein har brukt padding på elementa, då padding blir lagd til breidda på utsida av elementet. For å unngå dette kan du bruke CSS-eigenskapen box-sizing: border-box;. Denne eigenskapen gjer at padding i staden blir lagd innanfor kanten på elementa, slik at breidda på kvart element ikkje blir påverka. Det er vanleg å legge denne koden inne i veljaren *, slik at denne eigenskapen gjeld for heile nettsida.
I ramma over er ein slik regel lagd inn øvst i CSS-koden. Prøv å fjerne denne regelen og sjå kva som skjer.
Vi kan òg bruke float til å få element til å flyte ved sida av kvarandre inne i eit element, til dømes i ein horisontal meny.
I ein horisontal meny flyt lenkene ved sida av kvarandre. Det kan lagast ved å legge menylenkene i ei punktliste <ul>. I CSS set vi float:left; i regelen nav li, noko som vil påverke alle <li>-element som ligg inne i <nav>-elementet. Då får vi lenkene til å flyte ved sida av kvarandre i staden for under kvarandre. I same regel fjernar vi kulepunkta med list-style-type: none;.
For at lenkene i menyen skal halde seg inne i <nav>-elementet, må òg dette elementet ha float: left;. Viss ikkje, registrerer ikkje nettlesaren at det ligg noko inne i <nav>-elementet. Dette kan du sjå viss du fjernar float: left frå nav. Prøv det. Kva skjer? Den grå boksen rundt lenkene forsvinn. Det er fordi lenkene (li) ikkje lenger blir registrerte inne i nav-boksen, og derfor blir dei ikkje viste boksen.