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