CSS'de üç tip görünüm olabilir. Birinci görünüm block-level görünümdür. Block-level görünümünde koyulan elemantten önce ve sonra satır kırılması yapılır. Örneğin p,h1,h2...,h6 ,form vs.. block-level'dir. p tag'ini koyduğunuzda p alt satırdan devam eder.Block-level elementler yan yana görünemezler.
İkinci tip inline elementlerdir. İnline elementlerde satır kırılması yapılmaz. örneğin i,a,b tag'i inline'dir. Bir paragrafın içine a koyduğunuzda paragrafın akışı değişmez. inline elementler block-level elementlerin içine koyulabilirler.
Üçüncü tiptekilerde list-item tipidir. Bu tipte block-level gibi önce ve sonrasında satır kırılır fakat tek başına kullanılmaz. Bir listenin paraçasıdır ve başka block-level'in içindedir.
Bir elementin block-level,inline veya list-item olarak görünmesini sağlayabilirsiniz. Bunun için display property'si kullanılır. Örneğin eğer img için display:block derseniz her image koyulduğunda yeni satır yapılır. Eğer display:inline derseniz yeni satır yapılmaz ve bir i veya b tag'i gibi kullanabilirsiniz
Eğer bir elementin için dipslay:none yazarsanız o element görülmez.Web sayfalarında menüler bu şekilde yapılabilirler. Fare menunun üzerine geldiğinde menu maddelerinin özelliği display:block yapılır. Fare menuden ayrılırsa menu maddeleri display:none yapılarak görünmez hale getirilir.
Flow-Akış Kontrolü
Normal akış soldan sağa ve yukarıdan aşağıya doğrudur. Örneğin siz 10 resim eklediyseniz resimler solda sağa doğru yerleştirilirler. Eğer sağda yer kalmazsa aşağıdan devam ederler. Örneğin siz bir resmi eklediniz ve daha sonra eklediğiniz paragrafın resmin sağından akmasını istiyorsunuz. Halbuki normalde p tag'ini eklediğinizde yeni satıra geçer ve resmin altından başlar. Hiç bir zaman yazının resmin yanından akmasını sağlayamazsınız. İşte bu sorunu çözmek için float ve clear property'leri kullanılmaktadır.
Float property
float özelliği bir box'ı,resmi,tablo'yu vs.sola, sağa yerleştirmek için kullanılır. Siz bir elemanı flaot=left ile yerleştirirseniz bundan sonraki elmanlar o elamanın sağından akar. Yukardaki örnekle düşünürsek eğer resme float:left dersek bundan sonraki paragraf normal akışı olarak resmin sağından hareket edecektir. Aşağıda bu örneğin kodu görülmektedir.
1 <html> 2 <head> 3 <style> 4 img{
5 float:left;
6 }
7 </style> 8 </head> 9 <body> 10 <img src="test.gif"></img> 11 <p>Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. resmi geçtikten sonra en oldan yazı devam edecek. devam edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek edecek </p> 12 </body> 13 </html>
float:left dememiz sayesinde image sola yerleştirilir. Yazılarda onun sağından normal akışına devam eder. Eğer resmi sağa yazıyı sola almak istiyorsanız img için float:right demeniz yeterlidir.
Clear property
flaot özelliği ile resmi yerleştirdiğimizde bundan sonra eklenenler resmin sağından akacaktır. Şimdi resmi koydunuz, resmin sağından akacak yazıyıyı yazdınız. Ancak hala remin sağında boşluk var. Bundan sonra bir h1 başlık koyduğunuzda bu başlıkta sağda gözükecek. Halbuki siz bu başlığı solda görmek istiyorsunuz. Bu nasıl olacak. İşte bunun için clear özelliği kullanılır. h1 için clear:left yapılırsa h1 başlığı resmin sağına koyulmaz. Resmin altından normal akıştaki gibi devam eder. Aşağıda bu örneği görüyorsunuz.
1 <html> 2 <head> 3 <style> 4 img{
5 float:left;
6 }
7 h1{
8 clear:left;
9 }
10 </style> 11 </head> 12 <body> 13 <img src="test.gif"></img> 14 <p>Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. Burada ki yazılar resmin sağından akacak ve yoluna devam edecek. resmi geçtikten sonra en oldan yazı devam edecek.</p> 15 <h1>Bu başlık resmin altında olacak</h1> 16 </body> 17 </html>
Eğer clear:left demeseydik h1 başlığı resmin sağında olurdu.
