شلام کاربر گرامی ، همانطور که میدانید در طراحی یک سایت مبحث css بسیار مهم میباشد به همین دلیل امروز در مورد کاربردهای  خاصیتFloatدرCSS صحبت میکنیم .

با بهره گیری از خاصیت float یا شناور سازی در CSS می توان المان مورد نظر را به سمت راست یا چپ شناور کرد یا موقعیت آن را در سمت چپ و راست تنظیم کرد . از این طریق المان های دیگر می توانند مجاور المان مورد نظر در یک خط قرار گیرند .

خاصیت مزبور بیشتر ویژه ی تصاویر مورد استفاده قرار می گیرد، اما حین کار با طرح کلی / layout نیز می توان از آن بهره گرفت .

عناصر چگونه شناور می شوند ؟

المان ها را فقط می توان به صورت افقی شناور کرد، بدین معنا که تنها موقعیت عناصر را می توان در سمت چپ یا راست تنظیم کرد . امکان قرار دادن عناصر کنار هم در موقعیت های بالا و پایین وجود ندارد .

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

عنصر شناور می تواند در راست یا چپ ترین موقعیت ممکن قرار گیرد (در دورترین موقعیت سمت چپ یا راست المان دربرگیرنده و تا جایی که امکان و جا برای حرکت داشته باشند) .

عناصر بعد از یک عنصر با ویژگی float تغییر حالت خواهند داد.

عناصر قبل از یک عنصر با خصوصیت float تحت تاثیر قرار نمی گیرند.

یک عنصر با خاصیت float به اندازه محتوای داخل عنصر تغییر اندازه خواهد داد . این در حالی است که به صورت پیش فرض اندازه ای برای این المان در نظر نگرفته شده باشد.

مثال :

نمونه یک
?
۱
۲
۳

img {
float: right;
}

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

مثال :

نمونه دو
?
۱
۲
۳
۴
۵
۶

.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}

لغو حالت شناور عناصر (خاصیت float) با استفاده از خاصیت Clear

المان هایی که پس از عنصر با خاصیت float قرار دارند، همگی پیرامون المان نام برده (با خاصیت float) را احاطه می کنند . به منظور جلوگیری از وقوع این رخداد می توان خاصیت clear (خالی کردن یا پاک سازی فضای اطراف عناصر) را بکار برد . به وسیله ی خاصیت مذکور می توان تعیین کرد، عنصرهای دیگر اجازه ی دسترسی و قرار گیری در اطراف عنصر مربوطه (با خصوصیت float) را ندارند .

کافی است یک text line وارد گالری تصاویر کرده و خاصیت clear را بکار ببرید :

نمونه سه
?
۱
۲
۳

.text_line {
clear: both;
}

تمامی خصوصیت های مربوط به float یا شناور سازی در CSS

خاصیت

شرح

مقادیر

clear

کناره هایی از المان شناور را که المان های دیگر اجازه ی قرار گرفتن در آن را ندارند تعیین می کند .

left
right
both
none
inherit

float

تعیین می کند آیا کادر ((box شناور شود یا خیر .

left
right
none
inherit