CSS-fastigheten är en mycket viktig egenskap för layout. Det låter dig placera dina webbsiddesign precis som du vill att de ska visas - men för att kunna använda det måste du förstå hur det fungerar.
I ett stilark ser CSS-floategenskapen ut så här:
.right {float: right; }
Detta berättar för webbläsaren att allt med klassen "rätt" ska flyttas till höger.
Du skulle tilldela det så här:
class = "right" />
Vad kan du flyta med CSS floategenskapen?
Du kan inte flyta varje element på en webbsida. Du kan bara flyta blocknivåelement. Dessa är de element som tar upp ett block av utrymme på sidan, som bilder (), stycken (), divisioner () och listor ().
Andra element som påverkar text, men skapar inte en ruta på sidan, kallas inline-element och kan inte flyttas. Dessa är element som span (), radbrytningar (), stark vikt () eller kursiv ().
Vart flyter de?
Du kan flyta element åt höger eller vänster. Varje element som följer det flytande elementet kommer att flöda runt det flytande elementet på andra sidan.
Om jag till exempel flyter en bild till vänster kommer någon text eller andra element som följer efter att flöda runt den till höger. Och om jag flyter en bild till höger kommer någon text eller andra element som följer efter att flöda runt den till vänster. En bild som placeras i ett textblock utan någon float-stil som appliceras på den visar att webbläsaren är inställd att visa bilder. Detta är vanligtvis med den första raden av följande text som visas längst ner på bilden.
Hur långt kommer de att flyta?
Ett element som har blivit flytande flyttas så långt till vänster eller höger om behållarelementet som möjligt. Detta resulterar i flera olika situationer beroende på hur din kod skrivs. För dessa exempel kommer jag att flyta en liten DIV element till vänster:
- Om det flytande elementet inte har en fördefinierad bredd, tar det upp så mycket horisontellt utrymme som krävs och tillgängligt, oberoende av flottören. Obs! Vissa webbläsare försöker placera element bredvid flytande element när bredden inte är definierad. Vanligtvis ger det icke-flytande elementet en liten mängd utrymme. Så du borde Definiera alltid en bredd på flytande element.
- Om behållarelementet är HTML-elementet flyter det
DIVkommer att sitta längst till vänster på sidan. - Om behållarelementet är i sig innehållet av något annat, floats det
DIVkommer att sitta på vänster kant av behållaren. - Du kan hyra flytande element, och det kan resultera i att flottören hamnar på en överraskande plats. Till exempel är denna float en vänster flytande
DIVinuti en högerflödeDIV. - Flytande element kommer att sitta bredvid varandra om det finns utrymme i behållaren. Till exempel har denna behållare tre 100px breda
DIVelement flöt i en 400 px bred behållare.
Du kan även använda floats för att skapa ett fotogalleri layout. Du lägger varje miniatyrbild (det fungerar bäst om de är lika stora) i a DIV med bildtexten och float the DIV element i behållaren. Oavsett hur stor webbläsarfönstret är, kommer miniatyrerna att jämföras.
Stänger av flottan
När du väl vet hur man får ett element att flyta är det viktigt att veta hur man stänger av flottören. Du stänger av flottören med CSS Clear Property. Du kan rensa vänster flottor, höger floats eller båda:
rensa: vänster;rensa: höger;klara: båda;
Vilket element som du anger den klara egendomen för kommer att visas under ett element som floats i den riktningen. I det här exemplet rensas inte de två första styckena i texten, men den tredje är.
Spela med det tydliga värdet av olika element i dina dokument för att få olika layouteffekter. En av de mest intressanta floated-layouterna är en serie bilder längs höger eller vänster kolumn bredvid textens stycken. Även om texten inte är tillräckligt lång för att rulla förbi bilden, kan du använda rensningen på alla bilder för att se till att de visas i kolumnen istället för bredvid den föregående bilden.
HTML (upprepa denna paragraf):
Duis aute irure dolor sed gör det för tillfället olyckligt att avstå i voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.
CSS (för att flyta bilderna till vänster):
img.float {float: left; tydlig: vänster; marginal: 5px;}
Och till höger:
img.float {float: right; tydlig: right; marginal: 5px;}
Använda Floats för Layout
När du förstår hur flyta fastighetsarbeten kan du börja använda det för att lägga ut dina webbsidor. Det här är de steg jag tar för att skapa en flytande webbsida:
- Utforma layouten (på papper eller i grafikverktyg eller i mitt huvud).
- Bestäm varifrån sidavdelningarna ska vara.
- Bestäm bredden på de olika behållarna och elementen i dem.
- Flyta allt. Även det yttersta behållarelementet floats åt vänster så att jag vet var det kommer att vara i förhållande till webbläsarens visningsport.
Så länge du vet bredden (procentsatserna är bra) i dina layoutsektioner, kan du använda flyta egendom för att placera dem där de hör hemma på sidan. Och det trevliga är att du inte behöver oroa dig så mycket om boxmodellen är annorlunda för Internet Explorer eller Firefox.
