آموزش CSS – آشنایی با Attribute یی تحت عنوان clear در سی اس اس (CSS) (جلسه ۳۴)

Attribute یی تحت عنوان clear با float به کار گرفته می شود. همانطور که پیش از این گفتیم تگ های اچ تی ام ال (HTML) به صورت پیش فرض یکی پس از دیگری قرار می گیرند و زمانیکه یکی از آن ها را به سمت راست یا چپ float کنیم، تگ بعدی جای آن قرار خواهد گرفت.
گاهی اوقات در طراحی صفحات وب برای ما پیش می آید که نیاز داریم پس از آنکه تگی را float کردیم، تگ های بعدی جایگاه تگ float شده را نگیرند. برای این منظور می بایست از تگی تحت عنوان clear استفاده کنیم. برای روشن شدن این موضوع کدهای اچ تی ام ال (HTML) خود را وارد ویرایشگر کد می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <div id="header">Header</div>
       <div id="body">Body</div>
       <div id="menu">Menu</div>
       <div id="footer">Footer</div>
   </body>
</html>

همانطور که می بینیم از چهار تگ <div> برای ایجاد Header، Body، Menu و Footer استفاده کرده ایم و اسامی مرتبطی هم برای آن ها انتخاب کرده ایم. حال اقدام به نوشتن کدهای سی اس اس (CSS) در فایل مربوطه می کنیم:

#header {
   width:500px;
   height:100px;
   background-color:gray;
}
#body {
   width:400px;
   height:400px;
   background-color:yellow;
}
#menu {
   width:100px;
   height:200px;
   background-color:red;
}
#footer {
   width:500px;
   height:50px;
   background-color:gray;
}

همانطور که می بینیم برای هر کدام از تگ ها ابعاد و رنگ خاصی در نظر گرفته ایم. حال فایل خود را دخل مرورگر اجرا می کنیم:

clear_in_css

می بینیم که تگ ها یکی پس از دیگری به همان ترتیبی که نوشته شده اند به نمایش درآمده اند. حال قصد داریم تا Body را به سمت راست float کرده و menu را به سمت چپ. برای این منظور کدهای سی اس اس (CSS) خود را به صورت زیر بازنویسی می کنیم:

#header {
   width:500px;
   height:100px;
   background-color:gray;
}
#body {
   width:400px;
   height:400px;
   background-color:yellow;
   float:right;
}
#menu {
   width:100px;
   height:200px;
   background-color:red;
   float:left;
}
#footer {
   width:500px;
   height:50px;
   background-color:gray;
}

برای مشاهده تاثیر این تغییرات، پس از ذخیره کردن فایل سی اس اس (CSS)، مرورگر را به روز رسانی می کنیم:

2-clear_in_css

می بینیم که Body به سمت راست انتقال داده شده، Menu به سمت چپ و این در حالی است که Footer که بایستی جایگاه آن در پایین صفحه باشد، زیر Header قرار گرفته است. برای رفع این مشکل، کد سی اس اس (CSS) خود را به صورت زیر تکمیل می کنیم:

#header {
   width:500px;
   height:100px;
   background-color:gray;
}
#body {
   width:400px;
   height:400px;
   background-color:yellow;
   float:right;
}
#menu {
   width:100px;
   height:200px;
   background-color:red;
   float:left;
}
#footer {
   width:500px;
   height:50px;
   background-color:gray;
   clear:both;
}

همانطور که می بینیم برای تگ footer از Attribute تحت عنوان clear استفاده کرده و مقدار آن را برابر با both قرار داده ایم. لازم به ذکر است که این Attribute می تواند مقادیر right، left، both، none و inherit را داشته باشد.
مجدد مرورگر را به روز رسانی می کنیم:

3-clear_in_css

همانطور که از نام clear به معنی “پاک کردن” بر می آید، زمانیکه مقدار both را در نظر می گیریم، هر دو طرف تگی که برای آن clear را در نظر گرفته ایم پاک شده بنابراین آن تگ در کنار هیچ تگ دیگری قرار نخواهد گرفت. زمانیکه مقدار right را برای آن در نظر بگیریم تگ دیگری در سمت راست تگ مد نظر قرار نخواهد گرفت و زمانیکه مقدار left را برای آن در نظر بگیریم هیچ تگ دیگری در سمت چپ تگ مد نظر قرار نخواهد گرفت.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

توسط
تومان