٬در سی اس‌اس شما می‌توانید المان‌هایتان را به حالت شناور درآورید. یعنی اینکه سی‌اس‌اس به المان‌های شما کمک می کند که بتوانند به خوبی و خوشی در کنار دیگر المان‌ها باشند و در هر جای صفحه که شما دوست دارید شناور باشند. این کار توسط دستور float انجام می‌شود.
بدین ترتیب المان شما در سمت راست یا چپ که شما مشخص می‌کنید شناور می‌شود؛ یعنی بدون مزاحمت برای دیگر المان‌ها در سمت چپ یا راست آن‌ها قرار می‌گیرد.
HTML
CSS
img {
float: right;
margin: ۰ ۰ ۱۰px 10px;
}
اینجا یک متن نمونه قرار می‌گیرد. فرض کنید می‌خواهید در کنار متن نمونه خود یک عکس قرار بدهید. برای اینکه عکس و متن و به طور کلی دو المان در یک خط قرار بگیرند باید از قابلیت شناوری یا همان float استفاده کرد.
دستور تخلیه: clear
زمانی که شما یک المان را به حالت شناور در سمت چپ یا راست صفحه درمی‌آورید اجازه می‌دهید که باقی المان‌ها در کنار این المان جای بگیرند. برای اینکه المان‌های کنار دستی المان شناور را به خط بعدی هول بدهید و هیچ چیز مزاحم المان‌های شما نباشد باید از دستور clear استفاده کنید. هر سمتی که شما دستور تخلیه بدهید، تمامی المان‌های آن سمت به خط بعدی منتقل خواهند شد. همچنین شما با انتخاب clear: both می‌توانید تمامی المان‌های هر دو سمت را تخلیه کنید.
div {
clear: left;
}
به مثال زیر دقت کنید:
HTML
بدون استفاده از دستور تخلیه
با استفاده از دستور تخلیه
CSS
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #8AC007;
}
.div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #8AC007;
}
.div4 {
border: 1px solid red;
clear: left;
}
div2 – در این حالت دیویژن دوم چون دستور تخلیه ندارد پس بر روی دیویژن اول که در حالت شناور در سمت چپ قرار دارد، قرار می‌گیرد.
div4 -در این حالت چون دیویژن ۴ دارای دستور تخلیه است به خط بعدی هول داده می‌شود
