جلسه ی چهل و هشتم: خصوصیت Clear در CSS

css, آموزش طراحی سایت ابوالفضل کلهری بدون نظر 16 فوریه 2019 117 بازدید

خصوصیت Clear در CSS

در جلسات پیش در مورد خصوصیت float صحبت نموده ایم. (برای دیدن آموزش Float در CSS کلیک کنید) در این جلسه می خواهیم در مورد خصوصیت Clear در CSS و کاربرد آن صحبت کنیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

 

خصوصیت Clear در CSS چیست؟

شاید از خود بپرسید که خصوصیت Clear در CSS چیست و چه ربطی به خصوصیت Float دارد. عموما کاربرد این دو خصوصیت شبیه هم می باشد و می توان تعریف یکسانی برای آن ها داشت. یعنی می توان گفت که هر دوی این خصوصیت ها برای شناور کردن عناصر استفاده می شوند اما خصوصیت Clear عموما خصوصیت Float را خنثی می کند. باید بگوییم که یک تفاوت اصلی بین این دو خصوصیت وجود دارد و آن هم تاثیر بر روی اجزای دیگر است. یادتان باشد خصوصیت Clear در CSS در تمامی مرورگر ها پشتیبانی می شود.

زمانی که شما از خصوصیت فلوت استفاده می کنید عنصر مورد نظر مانند یک خصوصیت بلاک عمل کرده و جای خود را در صفحه از دیگران جدا می کند. همچنین ممکن است بعضی از عناصر را به بلاک بعدی بفرستد. اما در خصوصیت Clear این گونه نیست. این عنصر معمولا درون خصوصیت Float استفاده می شود تا جهت گیری یک عنصر درون آن را مشخص کند.

عموما خصوصیت Clear در CSS 3 حالت اصلی دارد که از آن ها استفاده می کنیم. این سه حالت عبارتند از:

  1. Right
  2. Left
  3. Both

 

یک مثال برای خصوصیت Clear در CSS

شاید تا اینجای کار خیلی خوب با این خصوصیت آشنا نشده باشید به همین دلیل می خواهیم با یک مثال این خصوصیت را به شما آموزش دهم. فکر کنید یک عکس دارید و می خواهیم یک متن در روبه روی آن و یک متن در زیر آن باشد و همه ی این ها در یک کادر قرار گیرند. شاید در مرحله ی اول فکر کنید که با خصوصیت Float می توانید این کار را بدون دردسر انجام دهید. ایرادی ندارد به نمونه کد زیر دقت کنید زیرا ما با استفاده از خصوصیت Float آن را نوشته ایم.

کد HTML:


<body>

<img src="image/img.jpg" alt="">

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام

و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>

<p class="p1">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام

و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>

</body>

کد CSS:


body {

background-color: #fff;

border: 1px solid #888

}

img{

width: 300px;

height: 200px;

float: right;

margin:10px

}

p {

margin: 20px

}

.p1 {

float: right;

margin: 15px

}

خروجی کد بالا:

خصوصیت Clear در CSS

زمانی که فقط از خصوصیت Float استفاده کنیم با این مشکل رو به رو می شویم. اما زمانی که از  خصوصیت Clear در CSS در کنار خصوصیت Float استفاده کنیم مشکلمان حل می شود.در نمونه کد زیر به جای خصوصیت Float از خصوصیت Clear استفاده کرده ایم.


body {

background-color: #fff;

border: 1px solid #888

}

img{

width: 300px;

height: 200px;

float: right;

margin:10px

}

p {

margin: 20px

}

.p1 {

clear: right;

margin: 15px

}

خروجی کد بالا:

خصوصیت Clear در CSS

همانطور که مشاهده می کنید مشکل ما با استفاده از خصوصیت Clear حل شد.

 

خلاصه مطلب

  1. می توان گفت که خصوصیت Clear در CSS برای شناور کردن عناصر استفاده می شوند و عموما خصوصیت Float را خنثی می کند.
  2. خصوصیت Clear در CSS در تمامی مرورگر ها پشتیبانی می شود.
  3. برای فهم این خصوصیت به مثال توجه کنید.

احساس خود را درباره این مقاله بگویید 0 نظر

جلسه ی چهل و هشتم: خصوصیت Clear در CSS
0 0
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

  • ایمیل شما هیچگاه توسط کمیابی ها فاش نمی شود.
  • لطفا از پرسش تکراری خودداری کنید.
  • برای پشتیبانی محصولات و دریافت بهترین نتیجه از بخش تیکت استفاده کنید.
  • میانگین زمان پاسخ دهی به دیدگاه ها، حدود 1 ساعت می باشد.
  • ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.