Jan
CSS Grundkunskap - Float och clear
Kategorier: CSSNu är det dags för den andra av tre artiklar som tar upp Visual Formatting Model i CSS 2. Det är dags att kika på begrepp som float och clear. För många verkar det ligga en mystisk dimma höljd över begreppen när det egentligen handlar om några få enkla regler.
Om du inte läst första delen av artikelserien som går igenom Visual Formatting Model föreslår jag att du gör det nu.
Float
En floatad box är en box som har förskjutits åt vänster eller höger på sin rad genom att värdet "float" har satts till "left" eller "right". Det speciella med floatade boxar är att innehåll kan flöda runt dem. Boxen förskjuts i sidled tills att dess kant nuddar kanten på antingen en annan floatad box eller boxen den ligger i. Boxar som är inline kommer att kortas av för att ge utrymme till den floatade boxen, medans block-boxar kommer att placeras ut som om den floatade boxen inte existerade. Den första exempelsidan visar detta.
En bra sak att lägga på minnet är att en floatad box alltid har display-värdet "block" oavsett om du har satt det till något annat i CSS:en.
Om en box som har display-värdet "inline" överlappar med en floatad box, t.ex. genom att ha en negativ marginal, kommer den att ritas upp ovanpå den floatade boxen. En block-box som överlappar kommer däremot att ritas upp bakom den. Detta kan du se på exempelsida nummer två. Tyvärr är det som står i standarden och det som webbläsarna gör inte samma sak. Varken Internet Explorer 6 eller 7 tolkar dessa regler på rätt sätt.
Clear
Om du inte vill att innehållet ska flöda runt floatboxen kan du hindra detta genom att använda CSS-värdet "clear". Det kan sättas till "left", "right", "both" eller "none". Clear bestämmer vilka sidor på en box som inte får nudda en floatad box. Ett tredje exempel visar hur det fungerar i praktiken.
Detta var egentligen allt jag hade att skriva om float och clear, en viktig del i visual formatting model och en stor källa till förvirring hos folk. Om du tycker att något saknas eller att något bör förklaras bättre, tveka inte att lämna en kommentar eller skicka ett mail till stefan@klientsidan.se.
TYCKTE DU OM ARTIKELN?
KOMMENTARER
- #1. Skriven av Pia den 23 Feb 2011
-
Vill bara berömma, oerhört pedagogisk sida! Har försökt genom alla möjliga sidor att förstår och nu tror jag äntligen polletten trillat ner - TACK!
- #2. Skriven av Stefan den 23 Feb 2011
-
Hej Pia och tack! Kul att du gillar artikeln. Jag får väl försöka ta mig i kragen och skriva några fler artiklar :)
