در این جلسه یاد گرفتیم چطور با استفاده از خاصیت float در CSS می‌توانیم عناصر را کنار هم قرار دهیم و یک طرح‌بندی ستون‌مانند بسازیم. این روش یکی از قدیمی‌ترین تکنیک‌های طراحی وب است که قبل از معرفی Flexbox و Grid بسیار پرکاربرد بود.

---

📄 مراحل اصلی

1. ساختار HTML

• ایجاد بخش اصلی با <div class="main-area">
• ایجاد ستون کناری با <aside class="sidebar">
• قرار دادن هر دو داخل یک والد به نام <div class="content-area">

2. محدود کردن عرض صفحه

برای خوانایی بهتر، کل محتوا را داخل یک container قرار می‌دهیم:

.container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

3. ایجاد ستون‌ها

.main-area {
  width: 66%;
  float: left;
}

.sidebar {
  width: 34%;
  float: left;
}

با این کار، دو بخش کنار هم قرار می‌گیرند.

4. مشکل Clearfix و راه‌حل

وقتی همه فرزندان float شوند، والد آن‌ها ارتفاعی نمی‌گیرد. برای رفع این مشکل از کلاس utility استفاده می‌کنیم:

.group::after {
  content: "";
  display: table;
  clear: both;
}

و به والد می‌دهیم:

<div class="content-area group">...</div>

5. درصد یا پیکسل؟

• استفاده از درصد باعث انعطاف‌پذیری و واکنش‌گرایی بهتر می‌شود.
• استفاده از پیکسل کنترل دقیق‌تری می‌دهد، اما باید مجموع عرض‌ها از عرض container بیشتر نشود.

---

📚 جمع‌بندی

• float + width برای ساخت ستون‌ها استفاده می‌شود.
• clearfix ضروری است تا والد ارتفاع درست بگیرد.
• می‌توان از درصد یا پیکسل برای عرض استفاده کرد.
• کلاس‌های utility مثل .group روش استانداردی برای مدیریت layout هستند.