بروز رسانی آذر ۲۰ام, ۱۳۹۸ ۱۰:۰۲ قبل از ظهر
اردیبهشت ۰۸, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
ویژگی clear
بطور مستقیم با ویژگی float در ارتباط می باشد. کار آن ویژگی آن می باشد که اطراف عنصر شناور را پاکسازی کند تا عناصر دیگر به پایین عنصر شناور سقوط کنند.
ویژگی float
به دنیای وب معرفی شد تا بتوانیم طرحی شبیه به مجلات و همچنین روزنامه ها داشته باشیم. جایی که عکسی را به دیدن کردن و نمایش می گذارند و همچنین متن دور آن هم تصویر جریان پیدا می کند:
حال کار ویژگی clear
آن می باشد که از جریان دادن عناصر در کنار عنصری که شناور شده می باشد جلوگیری کند.
در صورتی که عنصری دارید که در سمت راست آن هم عنصری شناور به سمت راست (float: right
) وجود دارد و همچنین می خواهید عنصر تو در کنار آن هم عنصر قرار نگیرد و همچنین به پایین آن هم سقوط کند کافی می باشد مقدار clear
آن هم را برابر با right
قرار دهید.
در مثال زیر تصویر به سمت راست شناور شده می باشد در پس نتیجه آن می شود که متن در کنار و همچنین پایین آن هم جمع شده می باشد:
See the Pen float/clear by Mojtaba Seyedi (@seyedi) on CodePen.
همانطور که دیدن می کنید جذاب و جالب نیست که قستی از لیست در کنار تصویر و همچنین قستی دیگر در زیر آن هم قرار بگیرند. جهت جلوگیری از آن کار می توانیم به عنصر ul
ویژگی clear
را با مقدار right
بدهیم تا از آن مشکل نجات پیدا کنیم:
See the Pen clear by Mojtaba Seyedi (@seyedi) on CodePen.
همینطور می توانید جهت اطمینان اکثرا و بیشتر در مورد بعدی از مقدار both
بهره بری و استفاده کنید تا در صورتی که عنصری به سمت چپ لیست نیز شناور شد از جمع شدن لیست در کنار آن هم هم جلوگیری می شود.
یکی از کاربردهای آن ویژگی مقابله با اشکالی می باشد که ویژگی float
جهت عنصر نگهدارنده بجود می آورد. در مورد آن مطلب می توانید اینجا اکثرا و بیشتر بخوانید.
ویژگی clear
در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, آندروید و همچنین iOS پشتیبانی می می شود.
آذر ۲۰, ۱۳۹۸ 0
شهریور ۱۹, ۱۳۹۸ 0
مرداد ۰۶, ۱۳۹۸ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0
فروردین ۲۵, ۱۳۹۶ 0
فروردین ۱۶, ۱۳۹۶ 0