با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در هنگام تعریف عناصر html در حالت عادی ، مخصوصا در عناصر سطح block این عناصر در مرورگر در زیر یکدیگر قرار می گیرند. در اغلب موارد شما نیاز دارید که این عناصر را در یک سطر در کنار یکدیگر بچینید. در ابتدا از جداول برای این منظور استفاده می شد، اما جدیدا راه های ساده تری از جمله استفاده از ویژگی های float و clear در CSS برای مرتب سازی و چینش عناصر در کنار یکدیگر ارائه شده است. کار چینش عناصر در کنار هم را ویژگی float در CSS ارائه می دهد و برای از بین بردن تاثیر آن روی سایر عناصر، از ویژگی clear در CSS استفاده می شود.
در ادامه ی این مبحث ما شما را با وضعیت های float در CSS آشنا کرده و همچنین عملکرد clear در CSS را نیز بررسی می کنیم.
ویژگی float
در CSS جهت چینش عناصر را در عنصر والد مشخص می کند.
ویژگی clear
در CSS نیز برای حذف تاثیر ویژگی float روی عناصر اطراف عنصر دارای این ویژگی استفاده می شود.
ویژگی float
در CSS جهت چینش عناصر را در عنصر والد مشخص می کند.
ویژگی float
در CSS شامل مقادیر زیر است:
ساده ترین کاربرد ویژگی float قرار دادن متن در کنار تصاویر در وب سایت است.
در مثال زیر با تنظیم حالت float در وضعیت right متن عنصر را در کنار تصویر داخل آن در سمت راست عنصر ترازبندی می کنیم.
در مثال زیر با تنظیم حالت float در وضعیت left متن عنصر را در کنار تصویر داخل آن در سمت چپ عنصر ترازبندی می کنیم.
کد CSS تصویر فوق به صورت زیر است:
این وضعیت هیچ کاری انجام نمی دهد یا وضعیت های قبلی float را حذف می کند.
ویژگی clear
در CSS نیز برای حذف تاثیر ویژگی float روی عناصر اطراف عنصر دارای ویژگی float و تعیین چینش آن ها استفاده می شود.
وضعیت clear دارای مقادیر زیر می باشد:
رایج ترین کاربرد ویژگی clear برای مشخص کردن ترتیب قرارگیری عناصر بعد از عنصر دارای ویژگی float است.
مثال کد زیر اجازه قرار گیری عناصر در سمت چپ را نمی دهد.
اگر محتوایی که دارای ویژگی float باشند اگر بزرگتر از عنصر والد خود باشند سریز رخ می دهد و از عنصر والد خود خارج می شود.
برای جلوگیری از سریز شدن باید از ویژگی overflow استفاده کنید.
برای جلوگیری از رخ دادن سریز کافیست از ویژگی overflow: auto;
استفاده کنید.
تا زمانی که شما خصوصیات margin و padding بخوبی تنظیم کنید ویژگی overflow: auto بخوبی کار می کند.
با این حال روش جدیدی برای clearfix و حذف سریز به صورت زیر ارائه شده که امن تر بوده و در اکثر وب سایت ها استفاده می شود:
1 2 3 4 5 | .clearfix::after { content: ""; clear: both; display: table; } |
با استفاده از ویژگی float به راحتی می توان شبکه بندی boxهای هم اندازه در کنار هم را ایجاد کرد:
1 2 3 4 5 6 7 8 9 | * { box-sizing: border-box; } .box { float: left; width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */ padding: 50px; /* if you want space between the images */ } |
box-sizing چیست
زمانی که شما با ویژگی float یک سری box در کنار یکدیگر قرار دهید، وقتی عرض box ها از عرض صفحه نمایش بیشتر شود قرارگیری boxها در کنار هم شکسته شده و یک یا چند box به سطر بعد منتقل می شود.
استفاده از ویژگی box-sizing
جلوی به هم ریختن ترتیب قرارگیری عناصر را می گیرد.
box-sizing
اجازه می دهد که عناصر با هر اندازه ای در اندازه های مختلف صفحه نمایش کنار هم قرار بگیرند.
1 2 3 4 5 | .img-container { float: left; width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */ padding: 5px; /* if you want space between the images */ } |
در مثال قبلی چگونگی قرار دادن Box هایی با اندازه های برابر در کنار یکدیگر را توضیح دادیم.
با این حال ایجاد box ها در کنار هم با ارتفاع برابر چندان آسان نیست.
برای این منظور باید یک مقدار ثابت برای ارتفاع تعریف کرد.
برای حل این مشکل CSS ویژگی Flexbox را معرفی کرده است که در بخش های آتی به آن خواهیم پرداخت.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-wrap: nowrap; background-color: DodgerBlue; } .flex-container .box { background-color: #f1f1f1; width: 50%; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>Flexible Boxes</h1> <div class="flex-container"> <div class="box">Box 1 - This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall.</div> <div class="box">Box 2 - My height will follow Box 1.</div> </div> <p>Try to resize the browser window to see the flexible layout.</p> <p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p> </body> </html> |
با استفاده از ویژگی float به راحتی می توان یک منوی افقی ایجاد کرد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .active { background-color: red; } </style> </head> <body> <ul> <li><a href="#home" class="active">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> |
نمونه طراحی زیر با استفاده از ویژگی float
ایجاد شده است.
کد طرح CSS فوق:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .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%; } |
ویژگی | توضیحات |
---|---|
box-sizing | عناصر HTML را با هر اندازه عرض در کنار یکدیگر حفظ می کند. |
clear | ترتیب قرار گیری عناصر بعد از عنصر حاوی ویژگی float را مشخص می کند. |
float | ترتیب قرارگیری عناصر در کنار یکدیگر را مشخص می کند. |
overflow | جلوی سریز شدن محتوای عناصر را می گیرد. |
overflow-x | وضعیت سریز محتوای عنصر از سمت راست و چپ را مشخص می کند. |
overflow-y | وضعیت سریز محتوای عنصر از سمت بالا و پایین را مشخص می کند. |
همانطور که در این آموزش مشاهده کردید با استفاده از ویژگی های float و clear در CSS می توان عناصر HTML را به راحتی در کنار یکدیگر به صورت مرتب و تا حدودی قابل انعطاف تنظیم کرد.