مقدمه

اگر مدت‌هاست با CSS کار می‌کنید، احتمالاً با مشکلی مواجه شده‌اید که هنگام استفاده از عناصر شناور (float) رخ می‌دهد. این مشکل زمانی ظاهر می‌شود که عنصر شناور از ارتفاع کانتینر والد بزرگ‌تر باشد و باعث شود والد ارتفاع درستی نداشته باشد.

سال‌ها توسعه‌دهندگان برای حل این مشکل از تکنیکی به نام Clearfix Hack استفاده می‌کردند. اما امروزه CSS راهکار مدرن‌تر و تمیزتری به نام display: flow-root ارائه کرده که تقریباً نیاز به Clearfix را از بین برده است.

در این مقاله با این قابلیت کاربردی آشنا می‌شویم.

مشکل عناصر Float

فرض کنید یک تصویر را با float: left شناور کرده‌ایم:

.box {
  padding: 1rem;
  background: rgba(255, 105, 180, 0.1);
  border: 3px dashed rgba(255, 105, 180, 0.1);
  border-radius: 5px;
}

.box img {
  float: left;
}

و ساختار HTML به شکل زیر باشد:

<div class="box">
  <img
    class="sammy"
    src="Sammy_punk.svg"
    width="200"
    height="128"
    alt="Sammy">

  Lorem ipsum dolor sit amet...
</div>

در این حالت ممکن است عنصر والد (.box) ارتفاع مناسبی نداشته باشد و بخشی از محتوا از محدوده آن خارج شود.

دلیل این اتفاق این است که عناصر دارای float از جریان عادی صفحه خارج می‌شوند و والد همیشه نمی‌تواند ارتفاع آن‌ها را به درستی محاسبه کند.

راهکار قدیمی: Clearfix Hack

برای سال‌ها رایج‌ترین راه‌حل استفاده از کلاس Clearfix بود.

معمولاً چنین کلاسی تعریف می‌شد:

.clearfix {
  overflow: auto;
}

سپس روی والد اعمال می‌شد:

<div class="box clearfix">
  <img
    class="sammy"
    src="Sammy_punk.svg"
    width="200"
    height="128"
    alt="Sammy">

  Lorem ipsum dolor sit amet...
</div>

با این روش، مرورگر ارتفاع عنصر والد را به درستی محاسبه می‌کرد و مشکل برطرف می‌شد.

هرچند این روش سال‌ها جوابگو بود، اما در واقع یک ترفند (Hack) محسوب می‌شد و هدف اصلی ویژگی overflow چیز دیگری بود.

راهکار مدرن: display: flow-root

امروزه CSS ویژگی جدیدی به نام flow-root ارائه کرده که دقیقاً برای همین مشکل طراحی شده است.

کافی است روی عنصر والد بنویسید:

.box {
  display: flow-root;

  padding: 1rem;
  background: rgba(255, 213, 70, 0.1);
  border-bottom: 2px solid rgba(236, 198, 48, 0.2);
}

همین یک خط باعث می‌شود عنصر والد یک Block Formatting Context (BFC) جدید ایجاد کند.

در نتیجه:

• عناصر Float داخل آن مدیریت می‌شوند.
• ارتفاع والد به درستی محاسبه می‌شود.
• دیگر نیازی به Clearfix یا ترفندهای مشابه نیست.

Block Formatting Context چیست؟

برای درک بهتر flow-root باید با مفهوم Block Formatting Context یا به اختصار BFC آشنا شویم.

BFC یک محیط مستقل برای چیدمان عناصر ایجاد می‌کند.

وقتی یک عنصر BFC جدید ایجاد می‌کند:

• عناصر Float داخل آن روی عناصر بیرونی تأثیر نمی‌گذارند.
• ارتفاع والد شامل عناصر شناور نیز می‌شود.
• مشکلات رایج مربوط به Float تا حد زیادی برطرف می‌شوند.

ویژگی display: flow-root ساده‌ترین روش ایجاد یک BFC است.

چرا flow-root بهتر از Clearfix است؟

استفاده از flow-root چند مزیت مهم دارد:

کد تمیزتر

به جای ساخت کلاس اضافی:

.clearfix {
  overflow: auto;
}

فقط کافی است بنویسید:

display: flow-root;

هدف مشخص

overflow در اصل برای کنترل محتوای اضافی طراحی شده است، نه رفع مشکلات Float.

اما flow-root دقیقاً برای مدیریت جریان چیدمان و ایجاد BFC ساخته شده است.

خوانایی بیشتر

وقتی توسعه‌دهنده دیگری کد شما را ببیند، به راحتی متوجه می‌شود که هدف از استفاده از flow-root مدیریت عناصر شناور بوده است.

پشتیبانی مرورگرها

طبق آمار سال ۲۰۲۰، حدود 87٪ مرورگرهای جهان از display: flow-root پشتیبانی می‌کردند.

مهم‌ترین مرورگرهایی که از آن پشتیبانی نمی‌کنند عبارت‌اند از:

• Internet Explorer 11
• Opera Mini

البته سهم این مرورگرها در آن زمان کمتر از ۱٫۵٪ از کاربران اینترنت بود و امروزه این عدد حتی کمتر نیز شده است.

در اکثر پروژه‌های مدرن می‌توان با خیال راحت از flow-root استفاده کرد.

چه زمانی از flow-root استفاده کنیم؟

این ویژگی زمانی مفید است که:

• داخل یک کانتینر از float استفاده کرده‌اید.
• ارتفاع والد به درستی محاسبه نمی‌شود.
• نمی‌خواهید از Clearfix استفاده کنید.
• به دنبال راهکاری مدرن و استاندارد هستید.

جمع‌بندی

ویژگی display: flow-root یکی از قابلیت‌های کمتر شناخته‌شده اما بسیار کاربردی CSS است که می‌تواند جایگزین مناسبی برای Clearfix باشد.

به طور خلاصه:

• عناصر Float گاهی باعث می‌شوند والد ارتفاع درستی نداشته باشد.
• در گذشته این مشکل با Clearfix و overflow: auto حل می‌شد.
• امروزه display: flow-root راهکاری استاندارد و تمیز برای این موضوع ارائه می‌دهد.
• این ویژگی با ایجاد یک Block Formatting Context جدید، عناصر شناور را به درستی مدیریت می‌کند.

اگر هنوز در پروژه‌های خود از Clearfix استفاده می‌کنید، وقت آن رسیده که به flow-root مهاجرت کنید و کدهای CSS تمیزتر و مدرن‌تری بنویسید.

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