Layout - ویژگی clear و clearfix

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی clear

ویژگی clear مشخص می‌کند که چه عنصری می‌تواند کنار عنصر clear شده و در کدام جهت float شود.[۱]

ویژگی clear می‌تواند یکی از مقادیر زیر را داشته باشد.

  • none - به عناصر اجازه float شدن در هر دو جهت را می‌دهد. این حالت پیش‌فرض است
  • left - به عناصر اجازه float شدن در سمت چپ را نمی‌دهد
  • right - به عناصر اجازه float شدن در سمت راست را نمی‌دهد
  • both - هیچ عنصری اجازه float شدن در سمت چپ یا راست را ندارد
  • inherit - عنصر مقدار ویژگی clear را از عنصر والد خود به ارث می‌برد

رایج‌ترین روش استفاده از ویژگی clear بعد از استفاده از ویژگی float را روی یک عنصر است.

هنگام clear کردن floatها، باید clear را با float مطابقت دهید: اگر عنصری به سمت چپ float شده‌است، پس شما باید آن را به سمت چپ clear کنید. عنصر float شده شما به float شدن ادامه می‌دهد، اما عنصر clear شده، در پایین آن روی صفحه وب نمایش می‌یابد.

مثال زیر ویژگی clear را برابر با left تنظیم می‌کند؛ که یعنی هیچ عنصری حق موقعیت دهی در سمت چپ (سمت چپ عنصر div) را ندارد:

مثال
div {
  clear: left;
}


Clearfix hack

اگر عنصری بزرگتر از عنصر نگهدارنده خود باشد، و float شده باشد، آن عنصر از عنصر نگه دارنده خود «سرریز» می‌کند:

بنابراین می‌توانیم به عنصر نگه دارنده overflow: auto; را اضافه کنیم تا این مشکل را رفع کنیم:

مثال
.clearfix {
  overflow: auto;
}


overflow: auto برای clearfix تا زمانی خوب کار می‌کند که قادر باشید حاشیه‌ها و paddingها را کنترل کنید (در غیراینصورت ممکن است با نوارهای پیمایش روبرو شوید). اما clearfix hack مدرن ، برای استفاده امن‌تر است، و کد زیر برای بیشتر صفحات وب بکار می‌رود:

مثال
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


مطالب بیشتری را در مورد شبه عنصر ::after در فصل‌های آینده خواهید آموخت.


منابع آموزشی