float در css مشخص می کند که یک المان در صفحه چطور قالب بندی می شود (formatting) و چطور قرار می گیرد (positioning)

float در css می تواند مقادیر زیر را بگیرد:

• left : المان در سمت چپ محدود در برگیرنده (container) خود قرار می گیرد.
• right : المان در سمت راست محدود در برگیرنده (container) خود قرار می گیرد.
• none : این حالت پیش فرض است که در آن المان، float نمی شود و در مکان معمولی خود قرار می گیرد.
• inherit : در این حالت، المان، مقدار float را از المان والد خود به ارث می برد.

float: right

به مثال زیر توجه کنید:

    
img {
    float: right;
  }

یک مثال ساده برای float، قرار گرفتن عکس در کنار متن می باشد:

float: left

مثال زیر نشان می دهد که عکس مقدار float: left را گرفته است:

    
img {
    float: left;
  }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac…

float: none

این حالت نشان می دهد که هیچ گونه float برای عکس قرار نداده ایم و عکس به صورت تصادفی در یک مکان قرار می گیرد:

    
img {
    float: none;
  }

ویژگی clear

clear در css مشخص می کند که چه المانی، در چه جهتی، در کنار المان clear شده قرار می گیرد.
به عبارت دیگر، وقتی عنصری float می شود، المان های بعدی به ترتیب در کنار آن قرار می گیرند، برای جلوگیری از این کار و خاتمه دادن به حالت float، از clear استفاده می کنیم.
clear در css یکی از مقادیر زیر را می گیرد:

• none : حالت پیش فرض است که به المان ها اجازه می دهد از هر دو طرف float باشند.
• left : به هیچ المانی اجازه نمی دهد که از سمت چپ float شود.
• right : به هیچ المانی اجازه نمی دهد که از سمت راست float شود.
• both : هیچ عنصری اجازه float شدن در سمت چپ یا راست ندارد.
• inherit : در این حالت، المان، مقدار clear را از المان والد خود به ارث می برد.

نکته: رایج ترین کاربرد clear، دادن آن به عنصرِ بعد از عنصری است که float شده است. به عنوان مثال، در کد زیر به div3 خاصیت float داده ایم، پس برای این که div4 در زیر آن قرار بگیرد، باید به div4 خصوصیت clear بدهیم.

نکته: دقت کنید هنگامی که می خواهید برای عنصری از clear استفاده کنید، clear را با float مطابقت دهید بدین صورت که اگر برای عنصری float: left باشد، مقدار clear را نیز برابر left قرار دهید. (در کد زیر می توانید این نکته را ببینید)
در این حالت عنصر float شده همچنان float باقی می ماند اما عنصری که clear می شود، در زیر آن قرار می گیرد.
در مثال زیر، مقدار clear برابر left تعیین شده است، بدین معنی که هیچ عنصری نمی تواند در سمت چپ قرار بگیرد:

    
.div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
  }
  
.div2 {
    border: 1px solid red;
  }
  
.div3 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
  }
  
.div4 {
    border: 1px solid red;
    clear: left;
  }

بدون clear

با clear

clearfix Hack

اگر المانی بزرگ تر از المان دربرگیرنده خود باشد و float شده باشد، از المان دربرگیرنده خود بیرون می زند. (overflow)

بدون clearfix

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum…

برای رفع این مشکل می توانیم مقدار overflow را برابر auto قرار دهیم.

    
.clearfix {
    overflow: auto;
  }

با clearfix

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum…

overflow: auto زمانی به خوبی کار می کند که شما نحوه استفاده صحیح از margin و padding را بدانید، در غیر اینصورت ممکن است اسکرول بار به وجود آید.
نوع جدیدتر clearfix hack ، امن تر می باشد که کد آن را در زیر مشاهده می کنید. این کد در اکثر وب سایت ها به خوبی کار می کند:

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

Grid of Boxes / Equal Width Boxes

قرار دادن تصاویر کنار هم با استفاده از float در css

با استفاده از این خاصیت، می توان تصاویر را به صورت grid کنار هم قرار داد:

  
    .img-container {
    float: left;
    width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
    padding: 5px; /* if you want space between the images */
  }

باکس با ارتفاع یکسان

در بخش قبل آموختیم که چگونه باکس هایی با عرض یکسان را در کنار هم قرار دهیم. حال می خواهیم باکس های با ارتفاع یکسان ایجاد کنیم.
هرچند که ایجاد باکس های float شده با ارتفاع یکسان آسان نیست اما یک راه حل اینست که یک ارتفاع مشخص به باکس ها بدهیم:

    
.box {
    height: 500px;
  }

استفاده از این روش، انعطاف پذیر نیست و هنگامی که وب سایت خود را در دستگاه دیگری (مثل موبایل) باز می کنید، نظم صفحه به هم می ریزد. راه حلی برای رفع این مشکل، استفاده از Flexbox در css می باشد.
با استفاده از flexbox ارتفاع باکس ها به صورت اتوماتیک به اندازه بلندترین باکس می شود:

    
.flex-container {
    display: flex;
    flex-wrap: nowrap;
  }

تنها اشکال flexbox این است که در نسخه ۱۰ Internet Explorer و نسخه های قبل از آن اجرا نمی شود.

Navigation Menu

می توانید با اجرای float بر روی hyperlink ها، لیست های افقی بسازید.

• Home
• News
• Contact
• About

Web Layout

همچنین می توان با استفاده از float طرح بندی کل صفحه وب سایت را نیز انجام داد:

برگرفته از وب سایت w3schools.com