صفت float تعیین کننده شناور بودن یا نبودن عناصر است.
از صفت clear برای کنترل عملکرد شناور بودن عناصر استفاده می شود.

ساده ترین استفاده از صفت float برای قرار دادن متن در اطراف تصویر است. در مثال زیر چگونگی شناور شدن و انتقال تصویر به سمت راست متن ، نمایش داده شده است.

مثال:

• صفت float

  img {
      float: right;
      margin: 0 0 10px 10px;
  }

  مشاهده مثال
•  

صفت clear

از این صفت برای کنترل عملکرد عناصر شناور ، استفاده می شود. عناصری هم که بعد از  یک عنصر شناور قرار دارند ، در اطراف آن عنصر شناور می شوند. برای جلوگیری از این حالت از صفت clear استفاده می شود.
این صفت تعیین می کند که عناصر دیگر در کدام سمت از عنصر مورد نظر شناور نشوند.

مثال :

• صفت clear

  div {
      clear: left;
  }

  مشاهده مثال
•  

هک  clearfix

اگر عنصری از عنصر نگه دارنده آن بزرگتر، بلندتر یا طولانی تر بوده و شناور باشد ، از عنصر نگه دارنده خود بیرون خواهد زد. برای حل این مشکل می توان به عنصر نگهدارنده  ;overflow: auto را اضافه کرد.

مثال :

• کلاس clearfix

  .clearfix {
      overflow: auto;
  }

  مشاهده مثال

تا زمانی که به margin و padding های مورد استفاده در قالب خود کنترل دارید می توانید از مورد بالا استفاده کنید ، اما می توانید جهت اطمینان بیشتر از هک جدید clearfix::after استفاده کنید که در حال حاضر در اکثر وب سایت ها مورد استفاده است ، زیرا از نظر نتیجه ای که ایجاد می کند ، مطمئن تر است.

• مثال :
• clearfix after

  
  .clearfix::after {
      content: "";
      clear: both;
      display: table;
  }

  مشاهده مثال
•  

نمونه قالب بندی وب

استفاده از صفت float برای کل قالب بندی صفحه وب ، متداول است.

مثال :

• • نمونه ای از قالب بندی یک صفحه وب

    .header, .footer {
        background-color: grey;
        color: white;
        padding: 15px;
    }
    
    .column {
        float: left;
        padding: 15px;
    }
    
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
    
    .menu {
        width: 25%;
    }
    
    .content {
        width: 75%;
    }

    مشاهده مثال
  •