آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش CSS Float

دوره های مرتبط با این مقاله

خاصیتFloatدرCSS چه کاربردی دارد ؟

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

عناصر چگونه شناور می شوند ؟

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

  • عناصر بعد از یک عنصر با ویژگی float تغییر حالت خواهند داد.
  • عناصر قبل از یک عنصر با خصوصیت float تحت تاثیر قرار نمی گیرند.

یک عنصر با خاصیت float به اندازه محتوای داخل عنصر تغییر اندازه خواهد داد . این در حالی است که به صورت پیش فرض اندازه ای برای این المان در نظر نگرفته شده باشد.

نمونه یک

        img {
            float: right;
        }
امتحان کنید

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

نمونه دو

        .thumbnail {
            float: left;
            width: 110px;
            height: 90px;
            margin: 5px;
        }
امتحان کنید

لغو حالت شناور عناصر (خاصیت float) با استفاده از خاصیت Clear

المان هایی که پس از عنصر با خاصیت float قرار دارند، همگی پیرامون المان نام برده (با خاصیت float) را احاطه می کنند . به منظور جلوگیری از وقوع این رخداد می توان خاصیت clear (خالی کردن یا پاک سازی فضای اطراف عناصر) را بکار برد . به وسیله ی خاصیت مذکور می توان تعیین کرد، عنصرهای دیگر اجازه ی دسترسی و قرار گیری در اطراف عنصر مربوطه (با خصوصیت float) را ندارند .
کافی است یک text line وارد گالری تصاویر کرده و خاصیت clear را بکار ببرید :

نمونه سه

        .text_line {
            clear: both;
        }
امتحان کنید

تمامی خصوصیت های مربوط به float یا شناور سازی در CSS

مقادیر
شرح
خاصیت
left right both none inherit
کناره هایی از المان شناور را که المان های دیگر اجازه ی قرار گرفتن در آن را ندارند تعیین می کند .
clear
left right none inherit
تعیین می کند آیا کادر ((box شناور شود یا خیر .
float
  • 4288
  •    2602
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .