شناور کردن عناصر توسط دستور float در CSS

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

نحوه استفاده

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

left: عنصر را به سمت چپ صفحه منتقل کرده و اجازه قرار گیری عناصر را در مجاورت خود می دهد.

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

مثال: دو کادر با عرض 200px و ارتفاع 400px در صفحه ایجاد کرده و آنها را در کنار هم قرار دهید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      body {
        direction: rtl;
        background-color: lightgray;
      }
      div{
        width: 200px;
        height: 400px;
      }
      #box1{
        background-color: lightsalmon;
        float: right;
      }
      #box2{
        background-color: lightskyblue;
        float: right;
      }
    </style>
  </head>
  <body>
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>

با اجرای دستورات فوق مشاهده خواهید نمود که دو کادر در کنار یکدیگر نمایش داده می شوند.

از بین بردن اثر float

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

<div style="clear: both;"></div>

مثال: سعی کنید کادرهایی مانند تصویر ایجاد نمایید.

ساخت اولین قالب در css

حل:

در ابتدای امر تنظیمات اولیه سند را انجام می دهیم.

body {
    direction: rtl;
    background-color:#f1f1f1;
}

برای آنکه چیدمان عناصر در یک قالب مشخص باشند ابتدا یک div به عنوان کادر اصلی که در برگیرنده سایر عناصر می باشد، تعریف کرده و style زیر را نیز به آن اعمال میکنیم.

<div id="main">

</div>
#main{
    width: 980px;
    height: auto;
    border: 1px solid #21243d;
    margin: 0px auto;
}

سپس درون div اصلی، یک div با استایل زیر، برای قسمت بالای قالب اضافه می کنیم.

<div id="main">
    <div id="header"></div>
</div>
#header{
    width: 100%;
    height: 150px;
    background-color: #21243d;
}

برای کادر سمت راست نیز یک div با استایل زیر اضافه می کنیم.

<div id="main">
    <div id="header"></div>
    <div id="sidebar"></div>
</div>
#sidebar{
    width: 30%;
    height: 400px;
    float: right;
    background-color: #e85f99;
}

در مرحله بعدی، کادر سمت چپ را اضافه می کنیم.

<div id="main">
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="content"></div>
</div>
#content{
    width: 70%;
    height: 400px;
    float: left;
    background-color: #f18867;
}

دو div مربوط به کادرهای سمت چپ و راست توسط خاصیت float شناور شده اند، برای از بین اثر float یک div دیگر با استایل داخلی به صفحه اضافه میکنیم.

<div id="main">
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="content"></div>
    <div style="clear: both;"></div>
</div>

و در پایان دیو انتهایی قرار داده می شود.

<div id="main">
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="content"></div>
    <div style="clear: both;"></div>
    <div id="footer"></div>
</div>
#footer{
    width: 100%;
    height: 80px;
    background-color: #50bda1;
}

کد صفحه بصورت یکجا به شکل زیر خواهد بود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      body {
        direction: rtl;
        background-color: #f1f1f1;
      }
      #main {
        width: 980px;
        height: auto;
        border: 1px solid #21243d;
        margin: 0px auto;
      }
      #header {
        width: 100%;
        height: 150px;
        background-color: #21243d;
      }
      #sidebar {
        width: 30%;
        height: 400px;
        float: right;
        background-color: #e85f99;
      }
      #content {
        width: 70%;
        height: 400px;
        float: left;
        background-color: #f18867;
      }
      #footer {
        width: 100%;
        height: 80px;
        background-color: #50bda1;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="header"></div>
      <div id="sidebar"></div>
      <div id="content"></div>
      <div style="clear: both;"></div>
      <div id="footer"></div>
    </div>
  </body>
</html>