Float-ominaisuus

float-ominaisuus - määrittää leijuvat lohkot, joita teksti kiertää. float-ominaisuutta käytetään joskus yhdessä clear-ominaisuuden kanssa, joka poistaa elementin kiertämisen.

Vaikka float alun perin keksittiin kiertävien lohkojen lisäämiseksi tekstiin, nykyään sitä käytetään hyvin laajasti ja epästandardiin tapaan ulkoasujen rakentamiseen.

Syntaksi

cssvalitsija {
  float: left | right | none;
}

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

Arvot float:lle

Arvo	Kuvaus
`left`	Lohko leijuu vasemmalla, ja teksti kiertää sitä oikealla.
`right`	Lohko leijuu oikealla, ja teksti kiertää sitä vasemmalla.
`none`	Ei kiertoa.

Oletusarvo: none.

Arvot clear:lle

Arvo	Kuvaus
`left`	Poistaa kiertämisen vasemmalta.
`right`	Poistaa kiertämisen oikealta.
`both`	Poistaa kiertämisen sekä vasemmalta että oikealta.
`none`	Ei kiertämisen poistoa.

Oletusarvo: none.

Esimerkki

Käytetään float-ominaisuutta epästandardiin tapaan asettamalla listan kohdet riviin:

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;
}

Результат:

Katso myös

ominaisuus clear,
joka poistaa floatin ylempien elementtien osalta