CSS plaukiojantys elementai - float

Lukas

Float parametras nurodo elementų plaukiojimą apgal kairę arba pagal dešinę pusę. Plaukiojimą nutraukia parametras clear. Plaukioti gali tik elementai, kurių poistion parametro reikšmė yra static arba relative. Plaukiojantys elementai naudojami dažnai, su jais galime kurti viso puslapio išdėliojimą, paveikslėlių galerijas, įterpti paveikslėlius į teksta ir kt.

Paveikslų galerija su plaukiojančiais elementais

img {
	width:50px;
	height:50px;
	position:relative;
	background-color: #32c3ef;
	margin: 10px;
	float:left;
}
h2 {
	clear:left;
}

Plaukiojantis paveiksliukas tekste

Dažnai kartu su tekstu yra pateikiami ir paveikslėliai, float parametras čia yra iš ties patogus.

1
2
3

img {
  float:right;
}

Puslapio išdėliojimas su plaukiojančiais elementais

#container {
  width:700px; 
  position:absolute;
  background-color:#CFC;
  border:1px solid #900;
  float:none;
}
 
.float {
  float:left;
  text-align:left;
}
 
#k_meniu {
  width: 150px;
  height:150px;
  background-color:#CCC;
}
 
#straipsnis {
  width: 400px;
  height:350px;
  background-color:#0C6;
}
 
#d_meniu {
  width: 150px;
  height:150px;
  background-color:#FC9;
}