cssblog.ir logo
P

clear

عمل clear در CSS

مشخصه clear کاربرد بسیار مهمی دارد که می تواند پس از float داد عناصر مورد استفاده قرار گیرد

یکی از مشخصه های بسیار جالب و شاید هم کمی عجیب در CSS مشخصه clear است. این مشخصه به تنهایی معمولا کاربردی ندارد و در مواردی استفاده می‌شود که بحث float مطرح است. همانطور که می‌دانیم floatباعث می‌شود که عنصر به آن سمت شناور شده و دیگر خاصیت blockـی بودن را نخواهد داشت که این به این معنی است که اگر فضایی در کنار عنصر float داده شده باقی مانده باشد آن فضا توسط عناصر زیرین (در صورتی که در آن فضا بتوانند قرار بگیرند) پُر خواهد شد. به بیان دیگر عنصری که float دارد دیگر عناصر زیرین خود را به پایین هُل نمی دهد. من به این اتفاق اصطلاحا «از بین رفتن جاذبه» می گویم که در این وبسایت بارها از من این اصطلاح را خواهید شنید. 

برای مثال به تصویر زیر دقت کنید:

float

این تصاویر نشان می دهند که یک عنصر پس از float چگونه موقعیت دهی می شود. حال اگر پس از عناصر دارای float عنصری وجود داشته باشد که clear: bothداشته باشد، این clear باعث خواهد شد که «جاذبه» دوباره به حالت عادی باز گردد یعنی عناصر زیرین دیگر امکان قرارگرفتن در کنار یا در بین عناصر دارای float را نخواهند داشت.

CSS Clear

مقادیر right و left

مشخصه clear علاوه برboth دو مقدارright وleft را نیز قبول می‌کند. همانطور که از خود این مقادیر پیداست، آنها بیانگر جهت راست یا چپ هستند. اما این جهت‌ها چه کاری انجام می‌دهند؟

عنصری که مشخصه clear با مقدار یکی از جهت‌ها داشته باشد به زیر عناصری خواهد رفت که دارای floatآن سمت هستند. مثلا اگر clear برابرleft بود، عنصر به زیر عناصری می رود که float آنها برابرleft است.

درباره clearfix

یکی از ترفندهای بسیار پرکاربرد CSS ترفندی بنام clearfix می باشد که نزدیک به تمام وبسایت ها از آن استفاده می‌کنند. پیشنهاد می کنم که حتما درباره آن بخوانید.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند