Normal Flow و Formatting Context

جریان طبیعی صفحه: Normal Flow و Formatting Context

در درس قبل دیدیم که مقدار display روی هر عنصر مشخص می‌کنه اون عنصر چه رفتاری داره. حالا وقتشه یه قدم عقب‌تر بریم و ببینیم اصلاً مرورگر، بدون هیچ دخالت اضافه‌ای (مثل Positioning، Flexbox یا Grid که در فصل‌های بعدی می‌بینیم)، چطور تصمیم می‌گیره عناصر رو کجای صفحه قرار بده. این رفتار پیش‌فرض، Normal Flow نام داره.

Normal Flow چیست؟

Normal Flow (جریان طبیعی) به رفتار پیش‌فرض مرورگر در چیدن عناصر HTML گفته می‌شه؛ یعنی وقتی هیچ Property خاصی مثل position، float یا سیستم‌های Layout پیشرفته‌تر (Flexbox، Grid) روی یک عنصر اعمال نشده باشه. در این حالت، مرورگر عناصر رو دقیقاً به همون ترتیبی که در HTML نوشته شدن، یکی پس از دیگری قرار می‌ده.

رفتار عناصر Block در Normal Flow

div {
  background-color: #e3f2fd;
  margin-bottom: 10px;
}

<div>جعبه اول</div>
<div>جعبه دوم</div>
<div>جعبه سوم</div>

در Normal Flow، عناصر Block از بالا به پایین، یکی زیر دیگری، چیده می‌شن؛ دقیقاً به همون ترتیبی که در کد HTML نوشته شدن. هر عنصر Block، کل عرض والدش رو می‌گیره و باعث می‌شه عنصر بعدی مجبور بشه به خط جدید بره.

رفتار عناصر Inline در Normal Flow

span {
  background-color: #fff9c4;
}

<p>
  <span>کلمه اول</span>
  <span>کلمه دوم</span>
  <span>کلمه سوم</span>
</p>

برخلاف عناصر Block، عناصر Inline در همون خط، از چپ به راست یا راست به چپ (بسته به جهت متن، که این مفهوم رو در فصل بعدی با Direction بررسی می‌کنیم)، کنار هم قرار می‌گیرن؛ تا وقتی که فضای خط تموم بشه و مرورگر مجبور بشه خودش به‌صورت خودکار به خط بعدی بره (Line Wrapping).

جریان طبیعی، جهت‌دار است

Normal Flow دو محور اصلی داره:

• محور Block: جهتی که عناصر Block پشت سر هم قرار می‌گیرن (معمولاً عمودی، از بالا به پایین).
• محور Inline: جهتی که عناصر Inline پشت سر هم قرار می‌گیرن (معمولاً افقی، هم‌جهت با جهت نوشتار).

این دو اصطلاح، دقیقاً همون مفاهیمی هستن که بعداً در فصل Logical Properties به‌طور کامل بررسی‌شون می‌کنیم؛ چون در زبان‌های مختلف (مثل فارسی که راست‌به‌چپه)، جهت این محورها می‌تونه تغییر کنه.

Formatting Context چیست؟

مفهوم Normal Flow به‌تنهایی کافی نیست تا رفتار کامل چیدمان رو توضیح بده؛ اینجاست که مفهوم Formatting Context وارد می‌شه. یک Formatting Context، مجموعه قوانینی‌ست که مشخص می‌کنه عناصر داخل یک ناحیه خاص، نسبت به هم چطور چیده و اندازه‌گیری می‌شن.

به زبان ساده‌تر: صفحه یک ساختار یکپارچه و یکسان برای همه عناصر نداره؛ بلکه بخش‌های مختلف صفحه می‌تونن هرکدوم Formatting Context جداگانه‌ای داشته باشن، با قوانین چیدمان متفاوت از بقیه.

Block Formatting Context (BFC)

رایج‌ترین نوع Formatting Context در Normal Flow، Block Formatting Context نام داره؛ محیطی که عناصر Block طبق قوانین همون چیزی که در این درس دیدیم (چیدمان عمودی، اشغال کل عرض) رفتار می‌کنن.

یه نکته مهم: بعضی از Propertyها، وقتی روی یک عنصر اعمال بشن، باعث می‌شن اون عنصر یک BFC جدید و مستقل تشکیل بده؛ یعنی محتوای داخلش دیگه با محیط بیرونی «تداخل» نداره. مثال‌هایی از این Propertyها عبارتن از:

• overflow با مقداری غیر از visible (مثل hidden یا auto)
• display: inline-block
• display: flow-root (که مخصوص همین منظور طراحی شده)
• position: absolute یا fixed
• عناصر Float شده (که در فصل‌های بعدی به‌طور محدود بهش اشاره می‌کنیم، چون در CSS مدرن جای خودش رو به Flexbox و Grid داده)

یک مثال عملی: چرا BFC اهمیت دارد؟

یکی از رایج‌ترین مشکلات Normal Flow، همون Margin Collapse است که در فصل ۴ کامل دیدیم. ایجاد یک BFC جدید، یکی از روش‌های رایج برای جلوگیری از این پدیده‌ست:

.parent {
  overflow: hidden;
}

<div class="parent">
  <p style="margin-top: 40px;">این پاراگراف است.</p>
</div>

وقتی overflow: hidden روی والد اعمال بشه، والد یک Block Formatting Context جدید تشکیل می‌ده. این باعث می‌شه Margin فرزند دیگه به بیرون از والد «نشت» نکنه (برخلاف مثالی که در فصل ۴ دیدیم، جایی که والد بدون هیچ Padding یا Borderای بود).

مثال دیگر: مهار کردن عناصر Float‌شده

هرچند Float در CSS مدرن دیگه به‌عنوان روش اصلی Layout استفاده نمی‌شه (این موضوع رو در فصل‌های Flexbox و Grid با جزئیات بیشتری خواهیم دید)، ولی یکی از کاربردهای تاریخی BFC، مهار کردن ارتفاع والدی بود که فقط فرزندان Float‌شده داشت. ایجاد یک BFC جدید روی والد (مثلاً با overflow: hidden یا display: flow-root)، باعث می‌شد والد به‌درستی ارتفاع فرزندان Float‌شده‌اش رو در نظر بگیره.

نکات مهم

• Normal Flow رفتار پیش‌فرض چیدمان است؛ وقتی هیچ سیستم Layout خاصی (مثل Position، Flexbox یا Grid) فعال نباشد.
• عناصر Block در Normal Flow به‌صورت عمودی، و عناصر Inline به‌صورت افقی، پشت سر هم چیده می‌شوند.
• Formatting Context مجموعه قوانینی است که چیدمان عناصر داخل یک ناحیه خاص را مشخص می‌کند؛ برخی Propertyها باعث ایجاد یک BFC جدید و مستقل می‌شوند.

اشتباهات رایج

• تصور اینکه همه عناصر صفحه، همیشه از یک قانون چیدمان واحد پیروی می‌کنند؛ در حالی که Formatting Contextهای مختلف می‌توانند رفتارهای متفاوتی داشته باشند.
• ندانستن اینکه چرا گاهی اضافه کردن یک Property به‌ظاهر بی‌ربط (مثل overflow: hidden) می‌تواند مشکل نشت Margin یا ارتفاع صفر والد را حل کند.

جمع‌بندی

Normal Flow رفتار پیش‌فرض مرورگر برای چیدن عناصر است: عناصر Block عمودی و پشت سر هم، عناصر Inline افقی و در جریان متن. Formatting Context مجموعه قوانینی است که این چیدمان را در یک ناحیه مشخص کنترل می‌کند، و بعضی Propertyها باعث ایجاد یک Block Formatting Context جدید و مستقل می‌شوند که می‌تواند رفتارهایی مثل نشت Margin یا مهار ارتفاع فرزندان Float‌شده را کنترل کند.