CSS-eiendommen er en svært viktig eiendom for oppsett. Det gjør at du kan plassere webdesignene dine akkurat som du vil at de skal vise - men for å kunne bruke det må du forstå hvordan det fungerer.
I et stilark ser CSS-floategenskapen slik ut:
.right {float: right; }
Dette forteller nettleseren at alt med klassen "høyre" skal fløyes til høyre.
Du vil tildele det slik:
class = "right" />
Hva kan du flyte med CSS flyten Eiendom?
Du kan ikke flyte hvert element på en nettside. Du kan bare flyte blokknivåelementer. Dette er elementene som tar opp en blokk med plass på siden, som bilder (), avsnitt (), divisjoner () og lister ().
Andre elementer som påvirker tekst, men ikke lager en boks på siden, kalles inline-elementer og kan ikke bli floated. Dette er elementer som span (), linjeskift (), sterk vekt () eller kursiv ().
Hvor flyter de?
Du kan flyte elementer til høyre eller venstre. Ethvert element som følger det flytede elementet vil strømme rundt det flytede elementet på den andre siden.
Hvis jeg for eksempel flyter et bilde til venstre, vil noen tekst eller andre elementer som følger den strømme rundt den til høyre. Og hvis jeg flyter et bilde til høyre, vil enhver tekst eller andre elementer som følger den flyte rundt den til venstre. Et bilde som er plassert i en blokk med tekst uten float-stil som er brukt på den, vil vise at nettleseren er satt til å vise bilder. Dette er vanligvis med den første linjen med følgende tekst som vises nederst på bildet.
Hvor langt vil de flyte?
Et element som har blitt drevet vil bevege seg så langt til venstre eller høyre for beholderelementet som mulig. Dette resulterer i flere forskjellige situasjoner avhengig av hvordan koden din er skrevet. For disse eksemplene vil jeg flyte en liten DIV element til venstre:
- Hvis det flytede elementet ikke har en forhåndsdefinert bredde, vil det ta opp så mye horisontal plass som nødvendig og tilgjengelig, uansett float. Merk: Enkelte nettlesere forsøker å plassere elementer ved siden av flytende elementer når bredden ikke er definert, noe som vanligvis gir det ikke-flytende elementet bare en liten mengde plass. Så du burde Definer alltid en bredde på flytende elementer.
- Hvis beholderelementet er HTML-elementet, flyter det
DIVvil sitte på venstre side av siden. - Hvis beholderelementet selv er inneholdt av noe annet, flyter det
DIVvil sitte på venstre kant av beholderen. - Du kan neste flytede elementer, og det kan føre til at flottøren ender opp på et overraskende sted. For eksempel er denne flyten en venstrefløt
DIVinne i en høyre floatedDIV. - Flyte elementer vil sitte ved siden av hverandre dersom det er plass i beholderen. For eksempel har denne beholderen tre 100px bredde
DIVelementene flyte i en 400px bred beholder.
Du kan til og med bruke flyter til å lage et fotogalleri-layout. Du legger hver miniatyrbilde (det fungerer best når de er like store) i a DIV med bildeteksten og flyte på DIV elementer i beholderen. Uansett hvorvidt nettleservinduet er, vil miniatyrbildene stå jevnt.
Slå av flyten
Når du vet hvordan du får et element til å flyte, er det viktig å vite hvordan du slår av floaten. Du slår av float med CSS Clear Property. Du kan fjerne venstre flyter, høyre flyter eller begge deler:
fjern: venstre;klare: høyre;klare: begge;
Ethvert element som du angir den klare egenskapen for, vil vises under et element som dannes i den retningen. For eksempel, i dette eksemplet blir de to første avsnittene i tekst ikke ryddet, men den tredje er.
Spill med den klare verdien av ulike elementer i dokumentene dine for å få forskjellige layouteffekter. En av de mest interessante flytende oppsettene er en serie bilder ned til høyre eller venstre kolonne ved siden av tekststykker. Selv om teksten ikke er lang nok til å rulle forbi bildet, kan du bruke klare på alle bildene for å sørge for at de vises i kolonnen i stedet for ved siden av forrige bilde.
HTML-koden (gjenta dette avsnittet):
Duis auter irure dolor sed gjør det til et øyeblikk for å komme tilbake i fullbyrdelse. Cupidatat non proident, ut labore et dolore magna aliqua.
CSS (å flyte bildene til venstre):
img.float {float: left; klar: left; margin: 5 px;}
Og til høyre:
img.float {float: right; klar: høyre; margin: 5 px;}
Bruke Floats for Layout
Når du forstår hvordan flyte eiendom fungerer, kan du begynne å bruke den til å legge ut dine nettsider. Dette er trinnene jeg tar for å lage en flytende nettside:
- Design oppsettet (på papir eller i et grafikkverktøy eller i hodet mitt).
- Bestem hvor sidedivisjonene skal være.
- Bestem bredden på de ulike beholderne og elementene i dem.
- Float alt. Selv det ytre beholderelementet flyter til venstre slik at jeg vet hvor det vil være i forhold til nettleservisningsporten.
Så lenge du vet breddene (prosentene er fine) i layoutseksjonene, kan du bruke flyte eiendom å sette dem der de tilhører på siden. Og det fine er at du ikke trenger å bekymre deg så mye om at modellmodellen er forskjellig for Internet Explorer eller Firefox.
