سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش Float در CSS با من همراه باشید.
با استفاده از ویژگی float در CSS میتوان یک یا چندین عنصر / تگ را در یک صفحه وب به سمت راست یا چپ شناور نمود.
بفرض مثال من یک باکس دارم که در این باکس یک تصویر هست و میخواهم این تصویر دقیقا در سمت چپ باکس نمایش داده شود، یعنی متن بیاد سمت راست و تصویر برود سمت چپ، پس اینجا میتوانیم از ویژگی float استفاده نماییم.
وقتی ما یک تصویر رو در یک باکس شناور می کنیم ، ولی اندازه تصویر از اندازه باکس اصلی بزرگتر باشه، به گونه ای که از باکس اصلی بیرون بزنه، عملا بهش می گویم سَرریز یا Overflow شده، حال برای رفع این مشکل باید از هک clearfix که برای اینکار ایجاد شده استفاده نماییم. ( مثال شماره ۳ )
وقتی یک عنصر شناور می شود، بصورت خودکار عنصر بعد از خودش را نیز شناور می کند، حال برای جلوگیری از شناور شدن اون عنصر بعدی باید از ویژگی clear استفاده نماییم. ( مثال شماره ۲ )
مثال از این ویژگی
در ادامه می توانید یک مثال از ویژگی float را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : شناور کردن تصویر به سمت راست
img{
float:right;
}
مثال شماره ۲ : نحوه استفاده از ویژگی clear جهت جلوگیری از شناور شدن عناصر بعد از عنصر شناور شده
p.my-clear{
clear:right;
}
مثال شماره ۳ : استفاده از هک clearfix جهت جلوگیری از سرریز شدن یک عنصر
.clearfix::after {
content: "";
clear: both;
display: table;
}
مثال شماره ۴ : طرح بندی ساده قالب با استفاده از float + واکنش گرایی
<body> <div class="header"> <h2>Header</h2> </div> <div class="clearfix"> <div class="seton-chap"> <h2>seton-chap</h2> </div> <div class="seton-vasat"> <h2>seton-vasat</h2> </div> <div class="seton-rast"> <h2>seton-rast</h2> </div> </div> <div class="footer"> <h2>Footer</h2> </div> </body>
مثال شماره ۵ : ایجاد یک قاب برای گالری تصاویر با استفاده از float + واکنش گرایی
img{
max-width:100%;
}
div.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
نکات و توضیحات
اگر عنصر یا تگی را به سمت راست یا چپ شناور میکنید، برای اینکه عناصر بعد از آن نیز شناور نشوند حتما از ویژگی clear استفاده نمایید. ( مثال شماره ۲ )
همانطور که در مثال شماره ۳ مشاهده می نمایید ، برای جلوگیری از سَرریز یا Overflow شدن یک عنصر می توان از هک clearfix استفاده کرد، استفاده از این تگ پیشنهاد میشه چون هم شناخته شده هست و هم بیشترین سازگاری را با مرورگرهای اینترنتی دارد.
هر چند می توان با استفاده از ویژگی overflow نیز از سرریز شدن یک عنصر جلوگیری کرد ولی هک clearfix بدلیل شناخته بودنش و سازگاری که با مرورگرهای مدرن دارد پیشنهاد می شود از این هک استفاده نمایید.
مثال از نحوه استفاده ویژگی Overflow برای جلوگیری از سَرریز شدن یک عنصر :
div{
border:2px solid #1d7ce7;
overflow:auto;
padding:10px;
}
div img{
float:right;
}
امیدواریم آموزش Float در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام و یا در تی جوان اینستاگرام دنبال کنید.
