Egenskapen float

Egenskapen float - definerer flytende blokker som tekst vil flyte rundt. Egenskapen float brukes noen ganger sammen med egenskapen clear, som opphever flyting av elementet.

Selv om float opprinnelig ble oppfunnet for å sette inn flytende blokker i tekst, blir den i dag brukt svært mye og på en ikke-standard måte for å bygge opp layouter.

Syntaks

selector {
	float: left | right | none;
}

selector {
	clear: both | left | right | none;
}

Verdier for float

Verdi	Beskrivelse
`left`	Blokken vil flyte til venstre, og teksten vil flyte rundt den til høyre.
`right`	Blokken vil flyte til høyre, og teksten vil flyte rundt den til venstre.
`none`	Ingen flyting.

Standardverdi: none.

Verdier for clear

Verdi	Beskrivelse
`left`	Opphever flyting fra venstre.
`right`	Opphever flyting fra høyre.
`both`	Opphever flyting både fra venstre og høyre.
`none`	Ingen oppheving av flyting.

Standardverdi: none.

Eksempel

Vi bruker float på en ikke-standard måte ved å sette listepunktene på linje:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

li {
	float: left;
	border: 1px solid red;
}

Se også

egenskapen clear,
som opphever float for overliggende elementer