CSS layout - float example

Denna sida erbjuder vanliga flytande exempel.

Gitter / likbredda rutor

Box 1
Box 2
Box 1
Box 2
Box 3

Genom att använda float Egenskapen kan enkelt användas för att skapa parallella flytande innehållsrutor:

Exempel

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Tre rutor (fyra rutor använder 25%, två rutor använder 50% och så vidare) */
  padding: 50px; /* Om du behöver lägga till avstånd mellan bilderna */
}

Prova själv

Vad är box-sizing?

Du kan enkelt skapa tre parallella flytande rutor. Men när du lägger till innehåll för att utöka bredden på varje ruta (t.ex. marginaler eller kanter) kan rutan skadas. box-sizing Egenskapen tillåter oss att inkludera inre marginaler och kanter i den totala bredden (och höjden) på rutan, vilket säkerställer att marginalerna förblir inom rutan och inte spricker.

Du kan hitta CSS Box Sizing I detta kapitel lär du dig mer om box-sizing-attributet.

Parallella bilder

Denna rutmönster (The grid of boxes) kan också användas för att visa bilder parallellt:

Exempel

.img-container {
  float: left;
  width: 33.33%; /* Tre rutor (fyra rutor använder 25%, två rutor använder 50% och så vidare) */
  padding: 5px; /* Om du behöver lägga till avstånd mellan bilderna */
}

Prova själv

Likbredda rutor

I detta exempel lärde du dig hur du kan skapa parallella flytande rutor med lika bredd. Att skapa rutor med samma höjd är dock inte lika enkelt. En snabb lösning är att sätta en fast höjd, som i följande exempel:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

Exempel

.box {
  height: 500px;
}

Prova själv

Men genom att göra detta förlorar du flexibiliteten. Om du kan säkerställa att det alltid finns lika mycket innehåll i rutan, är det bra. Men ofta är innehållet olika. Om du försöker med det föregående exemplet på en mobiltelefon, kommer du att se att innehållet i den andra rutan visas utanför rutan. Detta är där CSS3 Flexbox kommer till användning - eftersom det kan automatiskt dra ut rutan så att den är lika lång som den längsta rutan:

Exempel

Skapa en flexbox med hjälp av Flexbox:

Box 1 - Detta är några texter för att säkerställa att innehållet verkligen är mycket högt. Detta är några texter för att säkerställa att innehållet verkligen är mycket högt. Detta är några texter för att säkerställa att innehållet verkligen är mycket högt. Detta är några texter för att säkerställa att innehållet verkligen är mycket högt. Detta är några texter för att säkerställa att innehållet verkligen är mycket högt.
Box 2 - Min höjd kommer att följa ram 1.

Prova själv

Det enda problemet med Flexbox är att det inte fungerar i Internet Explorer 10 eller tidigare versioner. Du kan hitta mer information i vår CSS Flexbox Lär dig mer om Flexbox-läggningen i avsnittet.

Navigationsmeny

Placera float Använd tillsammans med hyperlinks för att skapa en horisontell meny:

Exempel

Prova själv

Webbgränssnittsexempel

Använd float Egenskapen är mycket vanlig för att slutföra hela webbgränssnittsdesignen:

Exempel

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

Prova själv

Mer exempel

En bild med ram och marginaler flyter till höger i stycket
Låt en bild flyta till höger i stycket. Lägg till ram och marginaler på bilden.
En bild med rubrik flyter till höger
Låt en bild med rubrik flyta till höger.
Låt den första bokstaven i stycket flyta till vänster
Låt den första bokstaven i stycket flyta till vänster och sätt in stilen för denna bokstav.
Skapa en webbplats med hjälp av flytande
Skapa en startsida med horisontell navigationsmeny, rubrik, fot och huvudinnehåll med hjälp av flytande.

Alla CSS flytande egenskaper

Egenskap Beskrivning
box-sizing Beräkning av elementets bredd och höjd: om de bör inkludera inre marginaler och ramar.
clear Specificera vilka element som kan flyta vid sida om ett element som ska rengöras och på vilket håll.
float Specificera hur elementet skall flyta.
overflow Specificera vad som händer om innehållet överskrider elementramen.
overflow-x Specificera hur innehållet hanteras när innehållet i elementet överskrider innehållsområdet för elementet.
overflow-y Specificera hur innehållet hanteras när innehållet i elementet överskrider innehållsområdet för elementet.