آموزش HTML و CSS آشنایی با CSS Float جلسه ۱۵ | پاسخ وردپرس |

مطالب پیشنهادی برای شما مهمان عزیز

بنام و یاد خدا سلام,

توی این جلسه از آموزش های html و css در وب سایت پاسخ وردپرس در خدمت شما هستم با آموزش Float  در css.

 float در CSS چیست ؟

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

توانایی float در  CSS

نقش مهمی را در طراحی ساختار وب سایت با استفاده از لایه ها ، خواهد داشت .
به طور مثال در ساده ترین حالت از این خاصیت برای حرکت تصاویر در متن استفاده می شود.

آموزش float در css

آموزش آشنایی ویژگی  float در css

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

این ویژگی می تواند مقادیر زیر را داشته باشد:

زمانی که یک عنصر به سمت راست هول داده می شود (float: right) محتوای بعد از آن دور لبه چپ عنصر پیچیده می شود. و زمانی که عنصر به سمت چپ هول داده شود (float: left) محتوای بعد از آن دور لبه راست عنصر جمع می شود.

بیشتر بخوانید :
آموزش html و css خاصیت margin و padding جلسه 12 | پاسخ وردپرس |

مقدار Right :

اگر ویژگی float را برابر right قرار دهید عنصر مورد نظر شما به سمت راست خواهد رفت ، برای درک این مطلب می توانید کد های زیر را اجرا کنید :

سورس کد HTML :

سورس کد CSS :

مقدار Left :

اگر مقدار خاصیت float را برابر left قرار دهید عنصر مورد نظر شما به سمت چپ خواهد رفت .

کد CSS :

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

بیشتر بخوانید :
آموزش مرتب کردن فایل های قالب وردپرس

تعریف ویژگی های float به صورت زیر است

[thumbup]

  • مقدار none :حالت پیش فرض است و هیچ فرقی به حال عنصر ما ندارد .
  • مقدار right :در سمت راست عنصر هیچ متن و عکسی قرار نمی گیرد .
  • مقدار left : در سمت چپ عنصر هیچ متن و عکسی قرار نمی گیرد .

[/thumbup]
آموزش css ویژگی float

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

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

حرف پایانی

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

بیشتر بخوانید :
آموزش HTML5 و CSS3 آموزش ویژگی clear در CSS | پاسخ وردپرس |

هر گونه سوال یا ابهامی داشته باشید از قسمت نظرات همین صفحه سوال خود را مطرح تمایید موفق پیروز باشید توی زندگی.

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

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