پاکسازی شناوری در CSS (Float Clear)
«پاکسازی شناوری» مشخص می کند عنصرِ بعدیِ یک عنصر شناور چگونه رفتار کند. با clear می توانیم پیچیدنِ ناخواسته محتوا را متوقف کنیم و با الگوی clearfix ارتفاع والد را درست نگه داریم.
ویژگی clear چیست؟
طبق منبع، مقدارهای clear عبارت اند از: none، left، right، both و inherit. این ویژگی اجازه نمی دهد عناصر کنار محتوای شناور قرار بگیرند.
مثال: جلوگیری از قرارگیری کنار شناور چپ
در این مثال، عنصر دوم زیرِ عنصر شناورِ چپ می رود و دیگر کنار آن قرار نمی گیرد:
div1 { float: left; } div2 { clear: left; }نکته: اگر نیاز به شناورسازی دارید، ابتدا بخش شناوری (Float) را ببینید تا با رفتار پایه آشنا شوید.
هک clearfix با ::after
اگر فرزندهای شناور از والد بیرون بزنند، می توان با «پاکسازی شناوری» و ایجاد یک شبه عنصرِ پس از محتوا، والد را وادار به دربرگرفتن کرد:
.clearfix::after { content: ""; clear: both; display: table; }این الگو شبه عنصری بدون محتوای دیداری می سازد، هر دو جهت را پاکسازی می کند و با display: table یک زمینه قالب بندی جدید می سازد.
چه زمانی از پاکسازی شناوری استفاده کنیم؟
- پس از مجموعه ای از ستون های شناور، برای بازیابی ارتفاع والد.
- وقتی متن یا دکمه ها نباید کنار تصویرِ شناور قرار بگیرند.
- وقتی سرریز کنترل نشده دارید؛ در این حالت همچنین به سرریز (Overflow) سر بزنید.
هشدار: استفاده بی رویه از شناوری مدیریت چیدمان را سخت می کند. اگر ممکن است از Flexbox یا Grid استفاده کنید، و فقط در موارد لازم سراغ «پاکسازی شناوری» بروید.