تبادل
لینک هوشمند
float یا شناوری این امکان را به یک عنصر می دهد تا شناور شود و به سمت چپ یا راست حرکت کند . وقتی به یک عنصر خاصیت float به سمت چپ یا راست داده میشود ، عنصر مورد نظر به آن سمت حرکت کرده و بقیه عناصری که بعد از عنصر float شده آمده اند و float ندارند به سمت مخالف رانده شده و اطراف عنصر مورد نظر را می گیرند .
توانایی float CSS نقش مهمی را در طراحی ساختار وب سایت با استفاده از لایه ها ، خواهد داشت . به طور مثال در ساده ترین حالت از این خاصیت برای حرکت تصاویر در متن استفاده می شود.
برای توضیح مناسب این خصوصیت به مثال زیر توجه کنید
یک تصویر بدون خاصیت CSS float در بین متن قرار گرفته است
|
1
2
3
4
5
|
example text example text example text example text example text example text example text example text example text example text example text example text example text |
یک تصویر همراه با خاصیت CSS float در بین متن قرار گرفته است
|
1
2
3
4
5
6
7
8
9
10
|
example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text |
با توجه به شکل بالا متوجه خواهید شد که تصاویر با استفاده از خصوصیت CSS float (float:left , float:right ) درون متن شناور شده اند و متن این عناصر را احاطه کرده است. اجزاء دارای خصوصیت CSS float بر روی اجزاء و عناصر کناری خود نیز تاثیر گزار خواهند بود . به طوری که در مثال بالا ملاحظه می نمائید متن در کنار تصاویر بعد از اضافه شدن خصوصیت CSS float به سمت مخالف جهت float حرکت کرده و همچنین تصویر را احاطه می کنند.
به این نکته توجه داشته باشید که خصوصیت CSS float تفاوتهای با خصوصیت position absolute دارد . یک عنصر با خصوصیت position absolute از جریان چینش صفحه جدا خواهد شد . در صورتی که در خاصیت CSS float عنصر از جریان صفحه پیروی خواهد کرد و با توجه به چینش و وضعیت اطراف خود تغییر موقعیت خواهد داد .
یک عنصر چگونه به وسیله CSS float شناور می شود
با استفاده از خصوصیت float میتوانید اکثر اجزاء را در یک چینش وب سایت شناور کنید . مقدار این خصوصیت میتواند ( left , right , both , none , Inherit ) باشد.
همه عناصر به صورت پیش فرض دارای خصوصیت float:none هستند . خصوصیت Inherit مشخص کننده این است که این عنصر از عنصر بالادستی خود پیروی خواهد کرد ( parent element )
|
1
|
.sideBar { float:left } |
عناصر دارای خصوصیت float از قوانین و شرایط خاصی پیروی خواهند کرد که در زیر به چند مورد اشاره خواهد شد .
- عناصر فقط در جهت افقی شناور خواهند شد . یه این معنا که عناصر فقط به سمت چپ و راست ( left , right ) شناور می شوند و حرکتی به سمت بالا و پایین نخواهند داشت .
- عناصر تا جایی به سمت چپ یا راست حرکت می کنند که اجازه و فضای حرکت داشته باشند
- عناصر بعد از یک عنصر با خصوصیت float تغییر حالت خواهند داد
- عناصر قبل از یک عنصر با خصوصیت float تغییر حالت نخواهند داد
- یک عنصر با خصوصیت float به اندازه محتوای داخل عنصر تغییر اندازه خواهد داد . این در صورتی است که به صورت پیش فرض اندازه ای برای این عنصر در نظر نگرفته شده باشد
در چه زمانی از خاصیت CSS float استفاده میکنیم ؟
CSS float کاربرد های بسیار زیادی در چینش ساختار صفحات وب سایت دارد . از ساده ترین چینش ( شناور شدن تصویر در متن در مثال بالا ) تا چینش ساختار صفحات . درک این خصوصیت و عکس العمل های اجزاء بعد از استفاده از این خصوصیت در طراحی و چینش صفحات وب نقش بسیار بزرگی را خواهد داشت . مرورگرهای متفاوت در مواردی خاص عکس العملهای متفاوتی در برابر استفاده از این خصوصیت دارند ( به طور مشخص IE ) و تشخیص و رفع این تفاوت ها می تواند یک امتیاز در طراحی وب سایت شما باشد و کمک کند وب سایت در تمامی مرورگرها به درستی نمایش داده شود .
چینش صفحات با استفاده از CSS float
Css float میتواند یک ابزار مناسب در محتوا و عناصر کوچک نیز باشد
نظرات شما عزیزان:
خبرنامه وب سایت:
آمار
وب سایت:
