ویژگی float در CSS به شما اجازه می‌دهد که عنصری را به سمت چپ یا راست بکشید و اجازه دهید دیگر عناصر آن را دور بزنند. این ویژگی برای طراحی‌های مختلف وب بسیار کاربردی است، مثلاً تنظیم تصاویر در کنار متن‌ها به شکلی که محتوا به زیبایی اطراف تصویر حرکت کند. با این حال، استفاده نامناسب از float می‌تواند باعث مشکلاتی در طرح‌بندی و هم‌پوشانی عناصر شود، بنابراین مهم است که به درستی استقاده شود.
در گذشته، float یکی از اصلی‌ترین روش‌ها برای ایجاد طرح‌بندی صفحات وب بود. اما امروزه با ورود flexbox و CSS grid، روش‌های بهتری برای مدیریت طرح‌بندی وجود دارد. با این حال، دانستن نحوه استفاده از float همچنان مفید است، چرا که در پروژه‌های قبلی ممکن است با آن مواجه شوید.
برای استفاده از float، کافی است که به سادگی ویژگی float را به عنصری که می‌خواهید شناور کنید اعمال کنید. این ویژگی به طور معمول با مقدارهای left و right استفاده می‌شود و به شما این امکان را می‌دهد که عنصر به طرف چپ یا راست صفحه حرکت کند.
یکی از مشکلات رایج با استفاده از float، تاثیر آن بر روی والد عناصر است. زمانی که عناصری با float تنظیم شده‌اند، ممکن است عنصر والد نتواند ارتفاع آنها را بشناسد و این می‌تواند باعث مشکلات طرح‌بندی شود. روش‌های مختلفی برای حل این مسئله وجود دارد، که یکی از مشهورترین آنها استفاده از ترفند clearfix است.
بهترین راه برای یادگیری float در CSS، نوشتن کد و آزمایش با طرح‌های مختلف است. همچنین، پیشنهاد می‌کنیم که با روش‌های جدیدتر مانند flexbox و grid آشنا شوید چرا که این روش‌ها امکان کنترل بیشتری بر روی طرح‌بندی می‌دهند و در بیشتر مواقع ساده‌تر و مؤثرتر هستند.
<div class="container">
<div class="float-left">
<p>این متن در کنار تصویر است.</p>
</div>
<img src="image.jpg" alt="تصویر" style="float:right; width: 150px; height: 150px;"/>
</div>
توضیح کد به صورت خط به خط:
<div class="container">: یک عنصرdivبه عنوان کانتینر اصلی برای نگه‌داشتن متن و تصویر ایجاد می‌کند.<div class="float-left">: این عنصرdivحاوی متنی است که می‌خواهید به صورت شناور در کنار تصویر قرار گیرد.<p>این متن در کنار تصویر است.</p>: متن نمونه‌ای که در کنار تصویر نمایش داده می‌شود.<img src="image.jpg" alt="تصویر" style="float:right; width: 150px; height: 150px;"/>: تصویری که به سمت راست شناور شده است، همراه با تنظیم اندازه و متن جایگزین.