Eigenschap float

De eigenschap float - definieert zwevende blokken die door tekst zullen worden omgeven. De eigenschap float wordt soms gebruikt in combinatie met de eigenschap clear, die het omgeven van een element opheft.

Hoewel float oorspronkelijk werd bedacht voor het invoegen van omgeven blokken in tekst, wordt het tegenwoordig zeer breed en op een niet-standaard manier gebruikt voor het opbouwen van lay-outs.

Syntaxis

cssselector {
  float: left | right | none;
}

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

Waarden voor float

Waarde	Beschrijving
`left`	Het blok zal links zweven en de tekst zal het rechts omgeven.
`right`	Het blok zal rechts zweven en de tekst zal het links omgeven.
`none`	Geen omgeving.

Standaardwaarde: none.

Waarden voor clear

Waarde	Beschrijving
`left`	Heeft het omgeven van links op.
`right`	Heeft het omgeven van rechts op.
`both`	Heeft het omgeven van zowel links als rechts op.
`none`	Geen opheffing van het omgeven.

Standaardwaarde: none.

Voorbeeld

We gebruiken float op een niet-standaard manier door de lijstitems op een lijn te plaatsen:

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

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

Результат:

Zie ook

de eigenschap clear,
die float voor bovenliggende elementen opheft