clear

ویژگی 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 برای عنصر نگهدارنده بجود می آورد. در مورد این مطلب می توانید اینجا بیشتر بخوانید.

در دموی زیر با گرفتن این ویژگی از عنصر فوتر درک خواهید کرد که این ویژگی چقدر با اهمیت است:

See the Pen two-column by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگر ها

ویژگی clear در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, اندروید و iOS پشتیبانی می شود.