مثال های شناوری در CSS (Float Examples)
در این بخش با «مثال های شناوری» آشنا می شوید؛ از چیدمان جعبه های کنار هم تا منوی ناوبری. سپس نکته های مربوط به box-sizing و گزینه های بهتر مانند Flexbox را می بینیم.
ایجاد جعبه های هم عرض با شناوری
برای قرار دادن چند جعبه کنار هم، عنصرها را شناور کنید و درصد عرض بدهید. این نمونه سه ستون برابر می سازد:
* { box-sizing: border-box; } .box { float: left; width: 33.33%; padding: 50px; }نکته: اگر پدینگ یا بردر اضافه کنید، با box-sizing: border-box عرض کل ثابت می ماند و چیدمان نمی شکند.
تصاویر کنار هم با شناوری
می توانید تصاویر را مثل شبکه، کنار هم قرار دهید. هر ظرف تصویر یک سومِ ردیف است:
.img-container { float: left; width: 33.33%; padding: 5px; }جعبه های هم ارتفاع (راه حل سریع)
برابر کردن ارتفاع ستون های شناور دشوار است. راه حل سریع، تعیین ارتفاع ثابت است؛ اما انعطاف پذیر نیست:
.box { height: 500px; }نکته: برای ارتفاع پویا و ستون های هم قد، به جای شناوری از Flexbox کمک بگیرید.
منوی ناوبری افقی با شناوری
با شناورسازی آیتم های لیست، یک منوی افقی ساده بسازید:
ul.navbarmenu { list-style: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.navbarmenu li { float: left; } ul.navbarmenu li a { display: inline-block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; } ul.navbarmenu li a:hover { background-color: #111; } ul.navbarmenu li a.active { background-color: red; }بهترین استفاده از مثال های شناوری
- برای متنِ پیچیده دور تصویر، نمونه های بالا کافی اند.
- برای لایه بندی پیچیده، به جای شناوری از Flexbox یا Grid استفاده کنید.
- برای مسائل پاکسازی، بخش پاکسازی شناوری (clear/clearfix) را ببینید.
هشدار: وابستگی زیاد به شناوری، نگه داری چیدمان را سخت می کند. گزینه های نوین را در نظر بگیرید. برای مرور مبانی، صفحه شناوری (Float) و برای کنترل سرریز، سرریز (Overflow) را ببینید. همچنین برای مرور همین صفحه از پیوند مثال های شناوری استفاده کنید.