امتیاز دهید:

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

<!DOCTYPE html>
<html>
  
   <head>
       <meta charset="utf-8">
       <title>Netshahr</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 را برای آن در نظر بگیریم هیچ تگ دیگری در سمت چپ تگ مد نظر قرار نخواهد گرفت. 

 


نظرات
نظرات
  • Sina :

    ممنونم
    عالی توضیح دادی


    1397/09/12 13:13:16
  • پروانه :

    بسیار آموزش های کاربردی دارید،برای من خیلی مفید واقع شدن,خیلی خیلی ممنون از زحمات شما


    1393/07/03 07:02:11

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )