میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

Float در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش Float در CSS با من همراه باشید.

با استفاده از ویژگی float در CSS میتوان یک یا چندین عنصر / تگ را در یک صفحه وب به سمت راست یا چپ شناور نمود.

بفرض مثال من یک باکس دارم که در این باکس یک تصویر هست و میخواهم این تصویر دقیقا در سمت چپ باکس نمایش داده شود، یعنی متن بیاد سمت راست و تصویر برود سمت چپ، پس اینجا میتوانیم از ویژگی float استفاده نماییم.

وقتی ما یک تصویر رو در یک باکس شناور می کنیم ، ولی اندازه تصویر از اندازه باکس اصلی بزرگتر باشه، به گونه ای که از باکس اصلی بیرون بزنه، عملا بهش می گویم سَرریز یا Overflow شده، حال برای رفع این مشکل باید از هک clearfix که برای اینکار ایجاد شده استفاده نماییم. ( مثال شماره ۳ )

نکته : اگر از ویژگی position با مقدار absolute استفاده کرده باشید، ویژگی float دیگه عمل نخواهد کرد.

وقتی یک عنصر شناور می شود، بصورت خودکار عنصر بعد از خودش را نیز شناور می کند، حال برای جلوگیری از شناور شدن اون عنصر بعدی باید از ویژگی clear استفاده نماییم. ( مثال شماره ۲ )


مثال از این ویژگی

در ادامه می توانید یک مثال از ویژگی float را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : شناور کردن تصویر به سمت راست

img{
float:right;
}

 

مثال شماره ۲ : نحوه استفاده از ویژگی clear جهت جلوگیری از شناور شدن عناصر بعد از عنصر شناور شده

 

p.my-clear{
clear:right;
}

 

مثال شماره ۳ : استفاده از هک clearfix جهت جلوگیری از سرریز شدن یک عنصر

 

.clearfix::after {
content: "";
clear: both;
display: table;
}

 

 

مثال شماره ۴ : طرح بندی ساده قالب با استفاده از float + واکنش گرایی

 

مثال شماره ۵ : ایجاد یک قاب برای گالری تصاویر با استفاده از 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 برای جلوگیری از سَرریز شدن یک عنصر :

 


امیدواریم آموزش Float در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

cssfloat cssfloat css propertyfloat css شرحFloat در CSSfloat در css چیست؟w3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاستفاده از float در cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfتگ float در cssخاصیت float در cssخصوصیت float در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهدستور float در cssساختار دستورات CSSسی اس اسصفت float در cssفارسی w3schoolsکاربرد float در cssکتاب آموزش css فارسیمفهوم float در cssویژگی float در css
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟