تکنیک Clearfix یک روش است که اطمینان حاصل می‌کند محتوای یک کانتینر به درستی اطراف و حاوی المان‌های پراکنده (floated) داخل آن می‌شود. این تکنیک با اضافه کردن یک المان خالی به کانتینر، که هر دو طرف فلوت‌های چپ و راست را پاک می‌کند، از وقوع مشکلات طراحی جلوگیری می‌کند و به کانتینر اجازه می‌دهد تا گسترده شود و طرح آن را حفظ کند.
Clearfix کمک می‌کند تا مشکلاتی مانند فروریزش کانتینر، ارتفاع‌های نامتوازن، تداخل محتوا، ترازی نامنظم را جلوگیری کند.
این فصل، چگونگی استفاده از تکنیک clearfix را برای اطمینان از اینکه عناصر کانتینر به درستی المان‌های فلوت شده خود را دربر می‌گیرند، بررسی می‌کند.
همانطور که گفته شد، CSS clearfix مشکلات سرریز المان‌ها را از المان مورد نظر رفع می‌کند. سه ویژگی زیر برای این کار مورد استفاده قرار می‌گیرند:
- ویژگی Overflow و Float
- ویژگی Height
- ویژگی Clear
نمودار زیر تکنیک clearfix را به عنوان مرجع نشان می‌دهد:
With overflow & float Property
در این مثال، یک تصویر درون یک کانتینر قرار گرفته است که اندازه آن بزرگتر از ارتفاع کانتینر است، که باعث می‌شود تصویر از مرزهای کانتینر خارج شده و ممکن است طرح صفحه را به هم بزند.
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: right;
border: 3px solid #f0610e;
}
</style>
</head>
<body>
<h2>Without clearfix</h2>
<div>
<img class="tutimg" src="images/tutimg.png" width="200" height="200">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div>
</body>
</html>در این مثال، تصویر با کلاس .tutimg به سمت راست شناور شده است (float: right;). این باعث می‌شود تصویر از جریان متن بیرون بیاید و ممکن است ارتفاع کانتینر را به گونه‌ای تغییر دهد که محتوای کانتینر با تصویر همپوشانی داشته باشد، که این امر می‌تواند به طرح صفحه آسیب بزند.
With overflow Property
برای حل مشکل اضافه شدن تصویر از مرزهای کانتینر، می‌توانیم به المان مربوطه خاصیت overflow: auto; را اعمال کنیم تا تصویر به طور کامل در داخل کانتینر قرار گیرد.
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: right;
border: 3px solid #f0610e;
}
.custom-clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2>With clearfix</h2>
<div class="custom-clearfix">
<img class="tutimg" src="images/tutimg.png" width="200" height="200">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div>
</body>
</html>در این مثال، به المان دارای کلاس .custom-clearfix خاصیت overflow: auto; اعمال شده است. این باعث می‌شود که هرگاه محتوای داخل کانتینر از ابعاد مشخص شده آن بیشتر شود، نوارهای اسکرول به کانتینر اضافه شود و کاربر بتواند با استفاده از آن به محتوای بیشتری دسترسی پیدا کند.
With height Property
می‌توانید نیز با تنظیم ارتفاع المان <div> مشابه ارتفاع تصویر شناور clearfix را به دست آورید.
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 10px;
height: 120px;
background-color: #86f00e;
}
.tutimg {
float: right;
border: 3px solid #f0610e;
}
</style>
</head>
<body>
<div>
<img class="tutimg" src="images/tutimg.png" width="120" height="120">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div>
</body>
</html>در این مثال، ارتفاع المان <div> به ارتفاع مشخص شده‌ی تصویر شناور (120px) تنظیم شده است. این باعث می‌شود که المان <div> به اندازه کافی بزرگ شود تا تصویر شناور را در خود جای دهد و از مشکلات clearfix جلوگیری شود.
CSS Clear Property
در CSS، ویژگی clear تاثیری بر مفهوم float دارد و عناصر را پس از عناصر شناور جا می‌دهد به جای اینکه آن‌ها به بالا بروند تا فضای موجود را اشغال کنند. ویژگی clear برای عناصر شناور و غیر شناور قابل اعمال است.
مقادیر ممکن عبارتند از:
none: یک کلیدواژه که نشان می‌دهد عنصر به پایین حرکت نمی‌کند تا از عناصر شناور گذشته بپاشد.left: یک کلیدواژه که نشان می‌دهد عنصر به پایین حرکت می‌کند تا از شناورهای سمت چپ گذشته بپاشد.right: یک کلیدواژه که نشان می‌دهد عنصر به پایین حرکت می‌کند تا از شناورهای سمت راست گذشته بپاشد.both: یک کلیدواژه که نشان می‌دهد عنصر به پایین حرکت می‌کند تا از همه شناورهای سمت چپ و راست گذشته بپاشد.inline-start: یک کلیدواژه که نشان می‌دهد عنصر به پایین حرکت می‌کند تا از شناورهای سمت شروع بلوک خود، یعنی شناورهای سمت چپ در اسکریپت‌های ltr و شناورهای سمت راست در اسکریپت‌های rtl گذشته بپاشد.inline-end: یک کلیدواژه که نشان می‌دهد عنصر به پایین حرکت می‌کند تا از شناورهای سمت پایان بلوک خود، یعنی شناورهای سمت راست در اسکریپت‌های ltr و شناورهای سمت چپ در اسکریپت‌های rtl گذشته بپاشد.
CSS clear – left Value
در مثال زیر، با استفاده از ویژگی clear:left برای عنصر مورد نظر، از clearfix استفاده شده است.
<html>
<head>
<style>
.mainbody{
border: 1px solid black;
padding: 10px;
}
.left {
border: 1px solid black;
clear: left;
}
.aqua{
float: left;
margin: 0;
background-color: aqua;
color: #000;
width: 20%;
}
.pink{
float: left;
margin: 0;
background-color: pink;
width: 20%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<div class="mainbody">
<p class="aqua">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in ton the Internet.
</p>
<p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="left">This paragraph clears left.</p>
</div>
</body>
</html>CSS clear – right Value
در مثال زیر، با استفاده از ویژگی clear:right برای عنصر مورد نظر، از clearfix استفاده شده است.
<html>
<head>
<style>
.mainbody{
border: 1px solid black;
padding: 10px;
}
.right {
border: 1px solid black;
clear: right;
}
.aqua{
float: right;
margin: 0;
background-color: black;
color: #fff;
width: 20%;
}
.pink{
float: right;
margin: 0;
background-color: pink;
width: 20%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<div class="mainbody">
<p class="aqua">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in ton the Internet.
</p>
<p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="right">This paragraph clears right.</p>
</div>
</body>
</html>CSS clear – both Value
در مثال زیر، با استفاده از ویژگی clear:both برای عنصر مورد نظر، از clearfix استفاده شده است.
<html>
<head>
<style>
.mainbody{
border: 1px solid black;
padding: 10px;
}
.both {
border: 1px solid black;
clear: both;
}
.aqua{
float: left;
margin: 0;
background-color: black;
color: #fff;
width: 20%;
}
.pink {
float: right;
margin: 0;
background-color: pink;
width: 20%;
}
p {
width: 45%;
}
</style>
</head>
<body>
<div class="mainbody">
<p class="aqua">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in ton the Internet.
</p>
<p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="both">This paragraph clears both.</p>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام