Layout
Om du provat att lägga två div-boxar direkt efter varandra, har du säkert märkt att de inte vill ligga på samma rad oavsett hur smala de är. Detta beror på att förvalet för alla box-element är att de ska starta på en egen rad. Detta gör det ju väldigt svårt att få till en bra layout... Turligt nog finns det CSS-egenskaper som kan vara till hjälp här!
Finns många alternativa metoder
Vi ska först gå igenom den klassiska metodiken för att skapa webblayout. Det finns dock modernare och bättre sätt som man kan skapa layout med - främst med flexbox och grid. Vilket är den typ av layout du bör använda för dina egna sidor. Dock är den klassiska float-metodiken så vanligt förekommande att det är ett måste att kunna denna också.
float
Med hjälp av egenskapen float kan vi säga att ett element ska tas ur det "vanliga" layoutflödet och placeras enligt våra önskningar. Förvalet är att float är satt till none, dvs element ska ligga med i det vanliga layoutflödet. Om vi sätter något av de övriga möjliga värdena på float kommer det dock att hända saker.
left
Om vi sätter float till left kommer elementet att tas ur det normala flödet och flyttas till vänster.
Det första elementet med float: left kommer att flyttas till vänstra kanten av föräldraelementet. Efterföljande element med float: left kommer att hamna på högerkanten av föregående float:ade element. Det vill säga elementen flyter mot vänster sida, så långt de kan tills något "tar emot". När deras föräldraelement blir "fullt" kommer de efterföljande elementen att hamna på raden efter. På detta vis kan vi bygga upp en layout som består av flytande boxar som ligger bredvid varandra.
I följande exempel skapar vi två element som ligger bredvid varandra på samma rad. Vilket gör att vi kan få till två kolumner med innehåll.
right
Detta float-värde fungerar precis som ovanstående, fast istället för att flyta åt vänster så flyter dessa element åt höger. Vi kan alltså få element att starta på högra sidan, istället för på vänster sidan som normalt.
clear
När vi börjar manipulera layoutflödet med hjälp av flytande boxelement kommer vi snart att hamna i en situation där saker flyter lite mer än man vill. Låt säga att du vill att två boxar ska flyta samman på en rad, medan de efterföljande boxarna ska ligga på raden under. Om du enbart använder float, kommer det att bli svårt att få till och det kommer att se ut ungefär så här.
Man skulle kunna manipulera de första två boxarnas bredd, så att de "puttar" ned efterföljande. Men det finns ett enklare och vettigare sätt att göra detta.
Med hjälp av CSS-egenskapen clear kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.
Genom att lägga till en clear kan vi fixa föregående exempel.
clear-värden
Man kan ange följande värden för egenskapen.
both
Det får inte förekomma någonting flytande på någon sida av elementet. Elementet förflyttas så långt ner att det ligger "ensamt".
left
Det får inte förekomma något flytande element på vänstra sidan. Elementet flyttas ned så långt att dess vänstra sida är "ren" ifrån andra flytande element.
right
Precis som ovanstående, fast nu gällandes den högersidan.
Problem med layoutflödet
Blandning av floatade/icke floatade element
Var försiktig med hur du blandar element som flyter med sådana som inte gör det. Det är lätt att man lyckas åstadkomma en situation där element täcker över varandra. Oftast är det lösbart genom att använda sig av clear-egenskapen. Men man kanske inte alltid märker alla möjliga kombinationer som kan uppstå, speciellt om man gjort en webbsida som ska innehålla dynamiskt innehåll och därför förändrar sig då och då.
Påverkan på föräldraelementets storlek
Vanligtvis försöker alla blockelement att sätta en höjd som täcker in allt innehåll som finns i dem (om vi inte sätter height explicit vill säga). När vi använder float lyfts dock de flytande elementen ur det normala layoutflödet och därför kommer de inte att räknas som en del av innehållet i föräldraelemetet. Detta kan orsaka en hel del problem.
En enkel lösning kan vara att även sätta float på föräldraelementet. Men i många fall varken kan eller vill man göra det. Då måste vi ta till en så kallad "clear fix". Det finns många varianter av denna fix, men om du lägger till följande kod i ditt stylesheet och sedan lägger till klassen clearfix till de blockelement som kräver en fix så bör allt fungera bra.
.clearfix::after {
content: "";
display: block;
clear: both;
}
Tyvärr är det rätt vanligt förekommande att man behöver ta till dylika fullösningar för att få till exakt det beteende man är ute efter.