ویژگی float در CSS
خصوصیت float در CSS چیست؟
با به کار گیری از خصوصیت float در CSS می اقتدار یک عنصر را به راست یا این طراحی سایت در مشهد که چپ تکان اعطا کرد. دراین حالت محتوایی که در ذیل عنصر (عنصری که صفت float روی آن اجرا گردیدهاست) قراردارد به سمت بالا تکان کرده و در کنار عنصر متبوع قرار میگیرد. در واقع موادتشکیل دهنده HTML به طور معمولی از بالای مرورگر تا زیر آن به طور یک پشته پایین هم قرار میگیرند. از جمله یک هدینگ در بالای ورقه، بعد از آن یک گزاره در پایین آن و …. البته بعضی وقت ها برای زیبایی بیشتر نیاز میباشد برخی از ارکان در کنار هم قرار گیرند.
با استعمال از خصوصیت float در CSS می اقتدار یک عنصر را به راست یا این که چپ تکان بخشید. صفت float برای قوانینی که بخواهیم متنها در کنار تصاویر قرار بگیرد بسیار ایده آل میباشد (مثل تصاویر در مجله). همینطور از صفت clear برای در دست گرفتن اخلاق عناصری که روی آنها float اجرا شدهاست به کارگیری میشود.
کاربرد خصوصیت float در CSS
همانگونه که می دانید عناصری که در تیم inline-level وجود دارا هستند، به طور پیش فرض می توانند در کنار هم قرار گیرند. از جمله در صورتی شما یک سری تگ a یا این که تگ span را پشت هم بنویسید، در خروجی، کلیه آن ها به طور یک سطر در کنار هم اکران داده می شوند. البته درحالتی که عناصری که در گروه block-level میباشند را بخواهید در کنار هم قرار دهید، بی آلایش ترین، ابتدایی ترین و پر کاربردترین نحوه استعمال از خصوصیت float در CSS میباشد. خواص float در CSS می تواند موادتشکیل دهنده HTML را در جهت خاصی شناور نماید.
خصوصیت float سعی بالایی در پیاده سازی صفحه های اینترنت دارااست. به عنوان مثال فرض فرمایید آلبوم از تصاویر دارید که هر تصویر یک متن توضیح نیز دارااست. html آن بصورت پایین خواهد بود:
"Alt
image caption
"Alt
image caption
"Alt
image caption
طریق فعالیت با خصوصیت float در CSS
عنصر
از نوع موادسازنده بلاک است، براین اساس اذن نمی دهد تا موادسازنده بعد در کنار آن قرار بگیرند. همینطور این عنصر مانند تصویر پایین تک تک فضای افقی اطراف خویش را اشغال می نماید.
حتی درصورتی که به هر کدام از موادتشکیل دهنده پهنا معین بدهید گشوده هم اذن نمی دهند تا عنصر آجل در کنارش قرار بگیرد.
کافی میباشد تا بهاین عنصرها float داده گردد:
figure {
float: left;
margin: 10px;
}
هنگامی که یک عنصر بلاک به یک سمت، float یا این که به عبارتی شناور میگردد پهنا آن عنصر به دست کم ممکن یعنی پهنا محتوای درون آن میرسد. در نمونه بالا پس از شناور کردن عنصرها به سمت چپ، پهنا عنصرها به اندازه تصویر و متن داخلشان کاهش پیدا می نماید.
نمونه از خصوصیت float در CSS
نمونه شماره ۱ : یک جعبه دارید که میخواهید به یاری خصوصیت float در CSS، تصویر را داخلش بسمت راست شناور فرمایید.
.MyImage{
float: right;
}
نمونه شماره ۲ : خودداری از از سرریز شدن تصویر (در نمونه شماره ۱ شما تصویر را شناور کردید البته در صورتیکه دقت کرده باشید عکس از جعبه خارج میزند (سرریز یا این که Overflow گردیده))
.MyBox::after{
content: "";
clear: both;
display: table;
}
نمونه شماره ۳ : خودداری از سرریز شدن ( طریق دوم به کار گیری از خصوصیت overflow)
.MyBox{
border: 3px solid black;
padding: 10px;
overflow: auto;
}
نمونه شماره ۴ : یک آلبوم تصویر بی آلایش + عکس العمل گرایی ( تصاویر در موقعیت معمولی برای اینکه کنار همدیگر قرار گیرند، بسمت چپ شناور می شون. در حالیکه زمانی اندازه برگه کمتر از ۵۰۰ پیکسل باشد، کلیه زیرهم قرار میگیرند(برخورد گرایی)
div.myimg {
float: left;
width: 33.33%;
padding: 5px;
}
نمونه شماره ۵ : استعمال از خصوصیت clear جهت دوری از شناور کردن عناصری که روی آن ها خصوصیت float در CSS اجرا گردیده است.
.Text-2{
clear: right;
}
جدول خصوصیات خصوصیت float در CSS
مقدار پیش فرض none
قابل ارث بری ندارد
قابل متحرک سازی ندارد
ورژن CSS1
شیوه به کارگیری در جاوااسکریپت object.style.cssFloat=”right”;
کدام مرورگرها از خواص float در CSS نگهبانی می نمایند؟
صورت نوشتاری خصوصیت float در CSS
روش تایپ کردن یا این که Syntax این خصوصیت float در CSS بصورت تحت میباشد:
float: none|left|right|initial|inherit;
جدول مقادیر خصوصیت float در CSS
مقدار توضیح
none مقدار پیش فرض – تگ به هیچ سمتی شناور نمیشود
Left تگ به سمت چپ شناور میشود
Right تگ به سمت راست شناور می گردد
initial استعمال از مقدار پیش فرض یا این که اول
inherit به کار گیری از مقدار بابا یا این که والد ( به ارث بری )
صفحه ارایی با به کارگیری از صفت float
پیش از اینکه خصوصیت float در CSS معرفی خواهد شد، طراحان با به کار گیری از عنصر table و اجزای آن عنصرها ورقه را در کنار هم می چیدند یا این که به اصطلاح طراحی صفحه می کردند. که فعالیت جالبی عدم وجود به این دلیل که عنصر table برای تشکیل داد جدول میباشد خیر طراحی صفحه. در سود با ورود float به دنیای اینترنت جایگزین خیر و خوبی برای طریق قبل دیزاین شد. کافی میباشد به ارکان بلاک که نقش نگهدارنده های مهم برگه را داراهستند، float داده گردد تا بتوانید ردیف های گوناگون برای محتوای کاغذ را بسازید.