آشنایی با صفت float و clear در CSS

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


 عناصر 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 روی آن اعمال شده است، عناصر زیرین  مجاز به قرار گرفتن نیستند :

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

.clearfix {
    overflow: auto;
}
خودتان امتحان کنید

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

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
خودتان امتحان کنید

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


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

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

layout

 

.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%;
}
خودتان امتحان کنید

 

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

دیدگاه های ارزشمند شما

trever filips - ۲ سال قبل
سلام من یک متن با عکس که در زیراون عکس متن قرار داره اگر بخوام متن که در زیرش هست رو ازبین ببرم چطور باید با صفت clear این کار رو انجام بدم
حمید رضا ملکی - ۲ سال قبل

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

هدف لرن سورس

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

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

بخش های اصلی

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

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.