Flyta - Float

Vad är Flyta?

Flyta är en CSS-egenskap som flyttar ett element till vänster eller höger sida av sin container. Det används ofta för att skapa layouten på en webbsida.

Hur använder man Flyta?

• Välj det element du vill flyta.
• Använd float: left för att flyta elementet till vänster eller float: right för att flyta elementet till höger.
• Använd clear: left eller clear: right för att rensa flytningen. Detta förhindrar att andra element flyter runt det flytande elementet.

Praktiskt exempel

HTML:

<div class="container">
  <div class="left">Vänster innehåll</div>
  <div class="right">Höger innehåll</div>
</div>

CSS:

.container {
  width: 100%;
}

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

Resultat:

Detta kommer att skapa en container med två flytande divar sida vid sida. Den vänstra diven kommer att ha 50 % bredd och flyta till vänster, och den högra diven kommer att ha 50 % bredd och flyta till höger.

Tillgänglighet

När du använder flytning är det viktigt att tänka på tillgänglighet. Se till att flytande element inte blockerar rullningsfältet eller viktig information för användare med synnedsättning.