Normalde bir sayfada elemanlar alt alta sıralanırlar. Fakat yaslama yapılarak eleman sağa ya da sola yaslanıp diğer elemanların bu elemanın etrafından akması sağlanabilir. Yaslama işlemleri için float ve clear özellikleri kullanılır.
float
Bu özellikle elemanlar sağa ya da sola yaslanabilir. Bu özelliğin varsayılan değeri none değeridir ve herhangi bir yaslama işleminin yapılmayacağını belirtir. left değeri kullanılırsa eleman olabildiğince sol tarafa yaslanır. right değeri kullanıldığında da eleman olabildiğince sağ tarafa yaslanır. Bir eleman bir tarafa yaslandığında bir sonraki satır içi elemanlar onun yanına yerleştirilir. Eğer bir sonraki eleman blok elemanıysa ve float özelliği ile biçimlendirilmezse çakışmalar görülebilir. Bir önceki eleman yaslama işleminden etkilenmez. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
clear
Bu özellik elemanın bir önceki elemanın yaslanmış olmasından etkilenmemesini sağlar. Varsayılan değer olan none değeri elemanın iki tarafında da yaslanmış eleman olmasına izin verir. left değeri kullanılırsa elemanın solunda yaslanmış bir eleman bulunamaz. right değeri kullanıldığında ise elemanın sağında yaslanmış bir eleman bulunamaz. both değeri iki tarafta da yaslanmış eleman olmamasını sağlar. Bu özellikle yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yaslama</title>
<meta charset="UTF-8">
<style>
p.floatleft{
float: left;
}
p.clearboth{
clear: both;
}
p{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<p class="floatleft">Örnek Paragraf 1</p>
<p class="floatleft">Örnek Paragraf 2</p>
<p class="floatleft">Örnek Paragraf 3</p>
<p class="clearboth">Örnek Paragraf 4</p>
<p class="floatleft">Örnek Paragraf 5</p>
</body>
</html>
Konumlandırma <<<<< CSS3 >>>>> Görüntüleme