شناوری در CSS (CSS Float)
«شناوری CSS» مشخص می کند یک عنصر چگونه درون محفظه حرکت کند و متن یا عناصر درون خطی پیرامونش پیچیده شوند. با استفاده از این ویژگی، چیدمان تصویر کنار متن ساده و قابل پیش بینی می شود.
ویژگی شناوری (float) در یک نگاه
ویژگی float برای جای گذاری و قالب بندی به کار می رود. مقدارهای آن طبق منبع عبارت اند از:
left— شناور شدن عنصر به چپ محفظهright— شناور شدن عنصر به راست محفظهnone— پیش فرض؛ عنصر در جای عادی نمایش داده می شودinherit— ارث گیری مقدار از والد
نکته: شناوری اغلب برای پیچیدن متن دور تصویر استفاده می شود. برای مدیریت هم پوشانی محتوا، نخست منطق چیدمان را بررسی کنید و در صورت لزوم از سرریز (Overflow) کمک بگیرید.
نمونه: float راست
در این حالت تصویر در راستای محفظه می نشیند و متن پیرامون آن می پیچد:
img { float: right; }نمونه: float چپ
با مقدار left، عنصر به سمت چپ می رود و جریان متن کنار آن ادامه می یابد:
img { float: left; }نمونه: بدون شناوری
مقدار none رفتار پیش فرض را بازمی گرداند و عنصر همان جا نمایش داده می شود:
img { float: none; }چند ستون با شناوری
می توانید بلوک ها را کنار هم قرار دهید. هرکدام را شناورِ چپ کنید و فاصله درونی بدهید:
div { float: left; padding: 15px; } .div1 { background: red; } .div2 { background: yellow; } .div3 { background: green; }هشدار: پس از مجموعه ای از عناصر شناور، ممکن است والد ارتفاع نگیرد. برای بازگرداندن جریان معمول، به راهنمای پاکسازی شناوری (Clear) مراجعه کنید.