Clear

Clear xüsusiyyəti elementlərə float xüsusiyyəti verilibsə, onu ləğv etmək üçün istifadə olunur. Float xüsusiyyətinin təsirində olan elementlər növbəti gələn elementə də təsir edir, clear isə bu təsiri aradan qaldırır.
 
Quruluşu: clear: <dəyər>
Aldığı dəyərlər: none | left | right | both | inherit
Başlanğıc dəyəri: none
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
 
Tutaq ki, qutu float:left dəyəri alıb, clear üçün left dəyəri verərək (clear:left;) həmin qutunun özündən sonra gələn qutuya olan təsirini aradan qaldırmış oluruq, yəni növbəti gələn qutu öncəki qutunun sağına keçməkdən azad olur. (bunu etməsəydik, növbəti gələn qutu öncəki qutunun sağına keçəcəkdi). Eynilə float:right üçün, clear:right istifadə edə bilərik. 
 

Clear

 
Aldığı dəyərləri bir-bir nəzərdən keçirək:
none - Clear xüsusiyyətini yox sayır. Bu halda element float xüsusiyyəti varsa, onun təsirində qalır. 
left - Float xüsusiyyəti ilə left dəyəri almış elementin float xüsusiyyətini ləğv edir. Bu halda digər sonrakı elementlər aşağı düşür.
right - Float xüsusiyyəti ilə right dəyəri almış elementin float xüsusiyyətini ləğv edir. Bu halda digər sonrakı elementlər aşağı düşür.
both - Float xüsusiyyəti ilə left və ya right dəyəri almış elementin float xüsusiyyətini ləğv edir. Bu halda digər sonrakı elementlər aşağı düşür.
inherit - Valideyn (üst element) elementin dəyərini alır.

Nümunəyə baxaq:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>clear</title>
  <style>
   #layer {
    float: left; /* Elementi sol tərəfə çəkir */
    background: #fd0; /* Fon rəngi */
    border: 1px solid black; /* Çərçivə parametrləri */
    padding: 10px; /* Mətn ətrafı boşluqlar */
    width: 40%; /* Blokun eni */
   }
  </style>
 </head> 
 <body>
  <div id="layer">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div style="clear: left"></div>
  <p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, 
  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
  odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore 
  te feugat nulla facilisi.</p> 
 </body>
</html>
 
Brauzerdə nəticə belə görünəcəkdir:
 

Css Clear

 
Şəkildən göründüyü ki, fon rəngi verdiyimiz bloka əvvəl float:left dəyəri verərək onu sola çəkdik. Daha sonra isə, clear:left istifadə edərək, həmin dəyəri ləğv etmiş olduq, nəticədə digər mətnlər blokun solunda deyil, aşağısında yerləşmiş oldu.
Nəticəyə bu linkdən də baxa bilərsiniz.
CSS3