شناور (Float)
«شناور (Float)» یعنی عنصر به چپ یا راست بچسبد. سپس متن دورتادورش می پیچد. این ترفند مثل عکس کنار متن در مجله است. با آن چینش بهتر و خواناتر می سازیم.
تعریف ویژگی شناور (Float)
ویژگی float جای عنصر را در ظرف تعیین می کند. مقادیرش left، right، none و inherit است. هنگام کوچک شدن صفحه، متن دور عنصر می پیچد.
نمونه: شناوری به راست
<style>
img {
float: right;
width: 170px;
height: 170px;
margin-left: 15px;
margin-bottom: 10px;
}
</style>
<p>این متن دورِ تصویر می پیچد.</p>
<img src="pineapple.jpg" alt="Pineapple">
نمونه: شناوری به چپ
<style>
img {
float: left;
width: 170px;
height: 170px;
margin-right: 15px;
margin-bottom: 10px;
}
</style>
<img src="pineapple.jpg" alt="Pineapple">
<p>متن از سمت راست می پیچد.</p>
نمونه: بدون شناوری
<style>
img {
float: none;
max-width: 185px;
width: 50%;
}
</style>
<p>اینجا تصویر در همان جای متن می نشیند.</p>
<img src="pineapple.jpg" alt="Pineapple">
چیدن چند جعبه کنار هم با شناور
با float: left می توان چند جعبه را ردیفی چید. مثل کارت های فروشگاه.
<style>
.box {
float: left;
padding: 15px;
}
.red {
background: red;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
</style>
<div class="box red">یک</div>
<div class="box yellow">دو</div>
<div class="box green">سه</div>
نکته: اگر محتوای شناور از ظرف بیرون زد، از سرریز (Overflow) کمک بگیر. همچنین برای لایه های روی هم، به شاخص Z (Z-index) سر بزن. برای بازگشت سریع به این صفحه، لینک شناور را نشانه گذاری کن.
گام های عملی
- تصویر یا جعبه را انتخاب کن.
floatراleftیاrightبگذار.- با متن بلند، پیچیدن را بررسی کن.
جمع بندی سریع
floatعنصر را کنار می چسباند.- متن دور عنصر می پیچد.
noneیعنی رفتار عادی.- برای مشکلات ظرف، از سرریز کمک بگیر.
- برای هم ردیفی ها، شناوری ساده جواب می دهد.