تاریخ انتشار:۱۲:۵۲ ۱۳۹۹/۷/۱۴

عناصر HTML به صورت عادی از بالای مرورگر تا پایین آن به صورت یک پشته زیر هم قرار میگیرند. برای مثال یک هیدینگ در بالای صفحه، سپس یک پاراگراف در زیر آن و ....  اما گاهی اوقات برای زیبایی بیشتر نیاز است بعضی از عناصر در کنار هم قرار بگیرند. با استفاده از صفت float در CSS میتوان یک عنصر را به راست یا چپ حرکت داد.

 صفت float برای شرایطی که بخواهیم متون در کنار تصاویر قرار بگیرد بسیار ایده آل است (مثل تصاویر در روزنامه).

از صفت clear برای کنترل رفتار عناصری که روی آنها float اعمال شده است استفاده میشود.

---

صفت float

صفت float میتواند دارای مقادیر زیر باشد :

• left - عنصر مورد نظر به سمت چپ حرکت کرده و محتوای زیرین آن در سمت راست عنصر قرار میگیرند
• right - عنصر مورد نظر به سمت راست حرکت کرده و محتوای زیرین آن در سمت چپ عنصر قرار میگیرند
• none - این حالت ویژگی float را برای عنصر غیر فعال کرده و عنصر در مکان عادی خود قرار میگیرد

در ساده ترین شکل استفاده از صفت float ، میتوان از آن برای قرار گرفتن نتون اطراف تصاویر استفاده کرد.

مثال زیر تصویری را مشخص میکند که دارای float با مقدار right است و متون در سمت چپ آن قرار میگیرند :

 }  img
     ; float : right
     ; margin : 0 0 10px 10px
 {

---

صفت clear

از صفت clear برای کنترل رفتار عناصری که روی آنها float اعمال شده است استفاده میشود.

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

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

 }  div
     ; clear : left
 {

اگر یک عنصر بزرگتر از عنصری باشد که داخل آن قرار گرفته است و بر روی این عنصر صفت float اعمال شده باشد، آن از container خود تجاوز خواهد کرد. برای حل این مشکل میتوان صفت overflow: auto; را به عنصر container افزود :

 }  clearfix.
     ; overflow : auto
 {

استفاده از overflow:auto تا زمانی که شما قادر به کنترل margin ها و padding های خود باشید کار خواهد کرد (در غیر این صورت ممکن است نوار پیمایش به عنصر اضافه شود).

روش بهتر استفاده از نمونه مثال زیر است :

 }  clearfix::after.
     ; "" : content 
     ; clear : both
     ; display : table
 {

نکته : شما در مورد شبه عنصر ::after در فصول آینده بیشتر خواهید آموخت

---

طرح بندی وبسایت با float

بسیار رایج است که طرح و ستون بندی  یک صفحه وب را با استفاده از صفت float انجام میدهند :

 

 }   header, .footer.
     ; background-color : grey
     ; color : white
     ; padding : 15px
 {
 }  column.
     ; float : left
     ; padding : 15px
 {
  }  clearfix::after.
     ; "" : content
    ; clear : both
    ; display : table
 {
 }  menu.
    ; % width : 25
 {
 }   content. 
    ; % width : 75
 {

منبع:learnsource