Floaten är en av de avgörande CSS-koncepten. Utan förståelse för denna princip kan inte webbsidor skapas baserat på CSS. Floatning kan översättas här till att flyta, vilket sammanfattar saken på pricken. I slutändan betyder floatning helt enkelt att en element placeras till vänster eller höger om ett annat element. (Normalt skulle detta element stå under ett annat element).
Ett första exempel ska tydliggöra denna aspekt.
<p><img src="bild.jpg" /> I denna uppsättning finns 12 Egna Former som ni kan använda i era flyers, bakgrunder osv. Formerna är uppdelade i 18, 21 och 24 ränder samt olika strålningsbredder. Dessa förinställningar utgör en bra grund för fina effekter i era layouter och bilder.</p>
Här definierades en paragraf. Inom denna paragraf finns en bild och vanlig text.
En titt på resultatet visar att bilden är i textflödet.
Nu kommer float-egenskapen in i spel.
img { float: left;}
Också här en titt på resultatet.
Här blev bilden alltså floated. Texten flödar därför runt om bilden.
Till egenskapen float kan man tilldela värdena left och right för att låta elementet "sväva" åt vänster (float: left) eller höger (float: right).
Ni kan också direkt tillämpa float: right på bilden.
I detta fall händer tre saker:
• Grafiken tas ut ur det normala flödet.
• Den flyttar sig helt upp i p-elementet.
• Den visas så långt höger som möjligt.
En titt på de tidigare resultaten visar att det inte ser särskilt snyggt ut ännu. Faktum är att det saknas avstånd mellan bilden och texten som omger den. Justera syntaxen på följande sätt:
img {
float: left;
margin-right: 20px;
}
Bilden tilldelades en högermarginal på 20 pixlar. Det ger följande utseende:
Prova gärna lite med marginalavstånden här.
Avsluta Floatning
Återigen tillbaka till bildexemplet. Jag utökar syntaxen med en ytterligare stycke text.
<p><img src="bild.jpg" />I denna uppsättning finns 12 Egna Former som ni kan använda i era flyers, bakgrunder osv. Formerna är uppdelade i 18, 21 och 24 ränder samt olika strålningsbredder. Dessa förinställningar utgör en bra grund för fina effekter i era layouter och bilder.</p><p&...189;
Resultatet ser ut så här:
Faktum är att inte bara den första paragrafen omsluter grafiken. Samma gäller även för den andra textparagrafen. Det beror enkelt och greppbart på att grafiken sträcker sig neranför den första paragrafen. För att förstå det bättre tilldelar jag helt enkelt paragrafen där grafiken finns en bakgrundsfärg.
När ni ser resultatet blir det tydligt att grafiken faktiskt sträcker sig neranför paragrafen. Det är självklart inte alltid önskvärt på detta sätt. Vid detta tillfället blir clear-egenskapen intressant. Genom den kan floatningen avslutas. clear tvingar ett följande element att faktiskt börja under ett floated element och inte bredvid det. clear-egenskapen känner följande värden:
• left – avslutar float: left
• right – avslutar float: right
• both – avslutar både float: right och float: left
I det följande exemplet tilldelar jag den andra paragrafen clear: left för att avsluta floatningen.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />I denna uppsättning finns 12 Egna Former som ni kan använda i era flyers, bakgrunder osv...189;
<p style="clear:left;">I denna uppsättning finns 12 Egna Former som ni kan använda i era flyers, bakgrunder osv. Formerna under...189;
</body>
</html>
Genom den visade syntaxen visas nu faktiskt den andra stycket under bilden.
I de flesta fall kan man för övrigt istället för clear: left eller clear: right helt enkelt använda clear: both. Därför rekommenderas det att enkelt skapa en motsvarande klass i ens stylesheet som sedan kan användas vid behov.
.clearing {
clear: both;
}
Denna klass kan du alltid använda när en float på ett element ska avslutas.
<p class="clearing">Innehåll ...</p>
Vad flytande är bra för
Självklart behövs flytande layout inte bara för textflödet i samband med bilder. Faktum är att det utgör grundkonceptet för CSS-baserade webbplatser. Genom flytten kan till exempel flerspaltiga layouter enkelt implementeras. Se följande exempel:
<!DOCTYPE html>
<html lang="sv">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Startsida</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalt">
Här finns webbplatsens innehåll.
</div>
</body>
</html>Här byggs en tvåkolumnslayout. Det speciella är att kolumnerna står bredvid varandra.
Och just detta att stå bredvid varandra uppnås genom konceptet med floating. Utförlig information om uppbyggnaden av webbplatser baserade på floating kommer senare i denna serie.
