آموزش Float در CSS

خاصیت Float در CSS چه کاربردی دارد ؟

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

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

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

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

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

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

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

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

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

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

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