تبلیغات
وبسایت تخصصی فناوری اطلاعات + فروشگاه اینترنتی :) - همه چیز در مورد خاصیت float در css

همه چیز در مورد خاصیت float در css

نویسنده : ekhshemasi شنبه 1392/08/25 22:30  •    ارسال شده در: گرافیک سایت آموزش html اینترنت برنامه نویسی


float یا شناوری این امکان را به یک عنصر می دهد تا شناور شود و به سمت چپ یا راست حرکت کند . وقتی به یک عنصر خاصیت float به سمت چپ یا راست داده میشود ، عنصر مورد نظر به آن سمت حرکت کرده و بقیه عناصری که بعد از عنصر float شده آمده اند و float ندارند به سمت مخالف رانده شده و اطراف عنصر مورد نظر را می گیرند .
توانایی float CSS نقش مهمی را در طراحی ساختار وب سایت با استفاده از لایه ها ، خواهد داشت . به طور مثال در ساده ترین حالت از این خاصیت برای حرکت تصاویر در متن استفاده می شود.

برای توضیح مناسب این خصوصیت به مثال زیر توجه کنید

چیست css float


یک تصویر بدون خاصیت CSS float در بین متن قرار گرفته است

<p><img src="images/example.jpg" alt="" />
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</p>

چیست css float

یک تصویر همراه با خاصیت CSS float در بین متن قرار گرفته است

<p><img style="float:left" src="images/example1.jpg" alt="" />
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 
<img style="float:right" src="images/example1.jpg" alt="" />
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 </p>

با توجه به شکل بالا متوجه خواهید شد که تصاویر با استفاده از خصوصیت 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 )

.sideBar { float:left }

عناصر دارای خصوصیت float از قوانین و شرایط خاصی پیروی خواهند کرد که در زیر به چند مورد اشاره خواهد شد .

  • عناصر فقط در جهت افقی شناور خواهند شد . یه این معنا که عناصر فقط به سمت چپ و راست ( left , right ) شناور می شوند و حرکتی به سمت بالا و پایین نخواهند داشت .
  • عناصر تا جایی به سمت چپ یا راست حرکت می کنند که اجازه و فضای حرکت داشته باشند
  • عناصر بعد از یک عنصر با خصوصیت float تغییر حالت خواهند داد
  • عناصر قبل از یک عنصر با خصوصیت float تغییر حالت نخواهند داد
  • یک عنصر با خصوصیت float به اندازه محتوای داخل عنصر تغییر اندازه خواهد داد . این در صورتی است که به صورت پیش فرض اندازه ای برای این عنصر در نظر نگرفته شده باشد

در چه زمانی از خاصیت CSS float استفاده میکنیم ؟

CSS float کاربرد های بسیار زیادی در چینش ساختار صفحات وب سایت دارد . از ساده ترین چینش ( شناور شدن تصویر در متن در مثال بالا ) تا چینش ساختار صفحات . درک این خصوصیت و عکس العمل های اجزاء بعد از استفاده از این خصوصیت در طراحی و چینش صفحات وب نقش بسیار بزرگی را خواهد داشت . مرورگرهای متفاوت در مواردی خاص عکس العملهای متفاوتی در برابر استفاده از این خصوصیت دارند ( به طور مشخص IE ) و تشخیص و رفع این تفاوت ها می تواند یک امتیاز در طراحی وب سایت شما باشد و کمک کند وب سایت در تمامی مرورگرها به درستی نمایش داده شود .

چیست css float

چینش صفحات با استفاده از CSS float

چیست css float

Css float میتواند یک ابزار مناسب در محتوا و عناصر کوچک نیز باشد

در خود آموزهای بعدی مطالب و مثال های بیشتری از نحوه استفاده از این تکنیک را تشریح خواهیم کرد



برچسب ها: float جیست؟ ، خاصیت float ، آموزش css ، float in css3 ، آموزش سی اس اس 3 ، آموزش html5 و css3 ،
آخرین ویرایش: شنبه 1392/08/25 22:54

سه شنبه 1396/05/17 10:41
Thanks for any other great post. The place else could anyone get that kind of info in such a perfect means of writing?
I have a presentation next week, and I am at the search for
such info.
سه شنبه 1396/01/22 15:42
Thanks for sharing your thoughts. I really appreciate your
efforts and I will be waiting for your next write ups thank you once again.
یکشنبه 1392/08/26 10:32
سلام بعد از سلام ببخشید چند رو نونستم بیام مطالبت رو بخونم . چند بار پیشنهاد تبادل لینک بهت دادم ولی لینکت رو توی دایرکتوری وبلاگم ندیدم . خوشحال میشم باهات تبادل لینک داشته باشم
یکشنبه 1392/08/26 10:11
سلام بعد از سلام ببخشید چند رو نونستم بیام مطالبت رو بخونم . چند بار پیشنهاد تبادل لینک بهت دادم ولی لینکت رو توی دایرکتوری وبلاگم ندیدم . خوشحال میشم باهات تبادل لینک داشته باشم
ekhshemasi
الان لینکتون او اد کردم
یکشنبه 1392/08/26 09:57
با استخدامی ها استخدام شوید/خبرنامه سایت | http://www.estekhdamiha.com/khabarname | آپلود رایگان عکس | http://upload.estekhdamiha.com |
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر