زنگ CSS: جلسه سیزدهم - شناوری المان‌ها

٬در سی اس‌اس‌ شما می‌توانید المان‌هایتان را به حالت شناور درآورید. یعنی اینکه سی‌اس‌اس به المان‌های شما کمک می کند که بتوانند به خوبی و خوشی در کنار دیگر المان‌ها باشند و در هر جای صفحه که شما دوست دارید شناور باشند. این کار توسط دستور float انجام می‌شود.

بدین ترتیب المان شما در سمت راست یا چپ که شما مشخص می‌کنید شناور می‌شود؛ یعنی بدون مزاحمت برای دیگر المان‌ها در سمت چپ یا راست آن‌ها قرار می‌گیرد.  

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

اینجا یک متن نمونه قرار می‌گیرد. فرض کنید می‌خواهید در کنار متن نمونه خود یک عکس قرار بدهید. برای اینکه عکس و متن و به طور کلی دو المان در یک خط قرار بگیرند باید از قابلیت شناوری یا همان float استفاده کرد.

دستور تخلیه: clear

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

div {    clear: left;}

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

div1

div2 - در این حالت دیویژن دوم چون دستور تخلیه ندارد بر روی دیویژن اول که در حالت شناور در سمت چپ قرار دارد، قرار می‌گیرد.

div3

div4 - با استفاده از دستور تخلیه المان‌های شناور در طرف تخلیه شده به خط بعدی هول داده می‌شوند.

.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;}

 div1

div2 - در این حالت دیویژن دوم چون دستور تخلیه ندارد پس بر روی دیویژن اول که در حالت شناور در سمت چپ قرار دارد، قرار می‌گیرد.

div3

div4 -در این حالت چون دیویژن ۴ دارای دستور تخلیه است به خط بعدی هول داده می‌شود