تا اینجا با بخش‌های مهمی از CSS مانند Box Model، اندازه عناصر، display و position آشنا شدیم. حالا می‌خواهیم با سه مفهوم مهم دیگر یعنی float، clear و overflow آشنا شویم. این سه ویژگی در نسخه‌های قدیمی‌تر CSS نقش بسیار مهمی در ساخت Layout صفحات داشتند و هنوز هم در بسیاری از پروژه‌های قدیمی، کدهای موجود و بعضی کاربردهای خاص دیده می‌شوند.

ممکن است هنگام کار با CSS با شرایطی مواجه شوید که بخواهید یک تصویر در کنار متن قرار بگیرد، یک عنصر شناور باشد، محتوای یک جعبه از محدوده آن خارج شود یا لازم باشد عنصری بعد از یک عنصر شناور قرار بگیرد. در چنین شرایطی درک درست float، clear و overflow بسیار مفید است.

البته باید از همین ابتدا یک نکته مهم را بدانیم: امروزه برای ساخت Layoutهای اصلی صفحات وب معمولاً از Flexbox و Grid استفاده می‌شود و float دیگر ابزار اصلی ساخت ستون‌های صفحه نیست. با این حال، float همچنان برای قرار دادن عناصری مانند تصویر در کنار متن کاربرد دارد و آشنایی با آن برای خواندن و نگهداری کدهای CSS ضروری است.

در این مقاله ابتدا float را یاد می‌گیریم، سپس با clear مشکل عناصر شناور را مدیریت می‌کنیم و در نهایت به سراغ overflow می‌رویم.

Float چیست؟

ویژگی float یک عنصر را به سمت چپ یا راست Container آن منتقل می‌کند و باعث می‌شود محتوای اطراف، مخصوصاً متن، بتواند در کنار آن قرار بگیرد.

مقادیر رایج float عبارت‌اند از:

float: left;
float: right;
float: none;

مثلاً:

.image {
    float: right;
}

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

float: left

.box {
    float: left;
}

عنصر به سمت چپ شناور می‌شود.

float: right

.box {
    float: right;
}

عنصر به سمت راست شناور می‌شود.

float: none

.box {
    float: none;
}

عنصر حالت شناور ندارد و رفتار عادی خود را در Flow صفحه حفظ می‌کند.

none مقدار پیش‌فرض float است.

Float چگونه رفتار می‌کند؟

برای درک بهتر، یک تصویر و یک متن را در نظر بگیرید.

HTML:

<img src="image.jpg" alt="تصویر نمونه" class="article-image">

<p>
    این یک متن نمونه برای توضیح نحوه عملکرد float است.
    وقتی تصویر را به سمت راست شناور می‌کنیم،
    متن می‌تواند در فضای باقی‌مانده در کنار تصویر قرار بگیرد.
    به این ترتیب می‌توانیم یک تصویر را در کنار یک پاراگراف نمایش دهیم.
</p>

CSS:

.article-image {
    float: right;
    width: 200px;
    margin-left: 20px;
    margin-bottom: 10px;
}

در این حالت تصویر در سمت راست قرار می‌گیرد و متن در فضای کنار آن جریان پیدا می‌کند.

این یکی از مهم‌ترین کاربردهای واقعی float است.

Float و خارج شدن از Normal Flow

عناصر شناور از جریان عادی Layout خارج می‌شوند؛ بنابراین ممکن است رفتارشان با چیزی که از عناصر معمولی انتظار داریم متفاوت باشد. در عین حال، متن و عناصر Inline اطراف می‌توانند فضای کنار Float را در نظر بگیرند.

مثلاً:

.image {
    float: right;
}

باعث می‌شود تصویر از محل معمول خود در Flow خارج شده و به سمت راست منتقل شود.

این موضوع درک رفتار float را کمی دشوار می‌کند؛ مخصوصاً زمانی که چند عنصر شناور یا یک Container والد داشته باشیم.

قرار دادن چند عنصر با Float

یکی از کاربردهای قدیمی float ساخت ستون‌های کنار هم بود.

مثلاً:

<div class="box box-1">باکس اول</div>
<div class="box box-2">باکس دوم</div>
<div class="box box-3">باکس سوم</div>

CSS:

.box {
    width: 30%;
    margin: 1.5%;
    float: left;
    padding: 20px;
    box-sizing: border-box;
}

.box-1 {
    background-color: #eee;
}

.box-2 {
    background-color: #ddd;
}

.box-3 {
    background-color: #ccc;
}

در این مثال، هر سه Box تلاش می‌کنند در یک ردیف قرار بگیرند.

اگر فضای کافی وجود نداشته باشد، عناصر شناور می‌توانند به خط بعد منتقل شوند.

این روش در گذشته برای ساخت Layoutهای چندستونه بسیار رایج بود، اما امروزه Flexbox و Grid ابزارهای مناسب‌تری برای این کار هستند.

مشکل مهم Float: ارتفاع والد

یکی از مشکلات معروف Float زمانی ایجاد می‌شود که یک Container فقط شامل عناصر شناور باشد.

مثلاً:

<div class="container">
    <div class="box">باکس اول</div>
    <div class="box">باکس دوم</div>
</div>

CSS:

.container {
    border: 2px solid black;
}

.box {
    width: 150px;
    height: 100px;
    float: left;
    margin: 10px;
}

ممکن است مشاهده کنید که ارتفاع .container آن‌طور که انتظار دارید شامل ارتفاع Boxهای شناور نمی‌شود.

دلیل این رفتار این است که عناصر Float از Flow عادی خارج شده‌اند.

به همین دلیل ممکن است Border یا Background والد، به نظر برسد که عناصر شناور را در بر نگرفته است.

Clear چیست؟

ویژگی clear برای کنترل رفتار یک عنصر نسبت به عناصر شناور قبلی استفاده می‌شود.

مقادیر رایج:

clear: none;
clear: left;
clear: right;
clear: both;

به زبان ساده، clear به مرورگر می‌گوید که این عنصر نباید کنار Floatهای مشخص‌شده قرار بگیرد و باید پایین‌تر از آن‌ها قرار داده شود.

clear: left

clear: left;

عنصر باید از Floatهای سمت چپ عبور کند و پایین آن‌ها قرار بگیرد.

clear: right

clear: right;

عنصر باید از Floatهای سمت راست عبور کند.

clear: both

clear: both;

عنصر باید از Floatهای چپ و راست عبور کند.

این مقدار یکی از پرکاربردترین حالت‌ها در کدهای قدیمی است.

مثال عملی clear

فرض کنید:

<div class="box">Box</div>

<p>
    این متن در کنار عنصر شناور قرار می‌گیرد.
</p>

<footer>
    Footer
</footer>

CSS:

.box {
    width: 200px;
    height: 100px;
    float: left;
}

footer {
    clear: both;
}

در اینجا footer بعد از Float قرار می‌گیرد و دیگر تلاش نمی‌کند در کنار آن نمایش داده شود.

Clearfix چیست؟

در پروژه‌های قدیمی ممکن است با چیزی به نام clearfix مواجه شوید.

هدف clearfix این است که Container والد بتواند Floatهای داخلی خود را بهتر در محدوده Layout دربر بگیرد.

یک روش کلاسیک:

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

سپس:

<div class="container clearfix">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

در این روش یک Pseudo-Element بعد از محتوای Container ایجاد می‌شود و با clear: both باعث می‌شود جریان Layout بعد از Floatها مدیریت شود.

در مقالات بعدی با Pseudo-Elementها به شکل کامل‌تر آشنا خواهیم شد.

روش مدرن‌تر: display: flow-root

CSS امروزی راه ساده‌تری برای ایجاد یک Formatting Context جدید در اختیار ما قرار می‌دهد:

.container {
    display: flow-root;
}

این روش می‌تواند باعث شود Floatهای داخل Container در محدوده آن Container باقی بمانند.

مثلاً:

.container {
    display: flow-root;
    border: 2px solid #333;
}

.box {
    width: 150px;
    height: 100px;
    float: left;
    margin: 10px;
}

در بسیاری از موارد، flow-root انتخاب واضح‌تری نسبت به استفاده از overflow فقط برای حل مشکل Float است. MDN نیز display: flow-root را به عنوان روشی برای ایجاد یک Block Formatting Context معرفی می‌کند.

فعلاً لازم نیست جزئیات Block Formatting Context را حفظ کنید. کافی است بدانید که flow-root می‌تواند به Container کمک کند Floatهای داخلی را در Layout خود دربر بگیرد.

Float در طراحی سایت مدرن

در گذشته ممکن بود Layout یک سایت تقریباً به این شکل ساخته شود:

.sidebar {
    float: right;
    width: 30%;
}

.content {
    float: left;
    width: 70%;
}

اما امروز برای چنین Layoutهایی معمولاً Flexbox یا Grid انتخاب مناسب‌تری است.

مثلاً در آینده می‌توانیم چنین ساختاری داشته باشیم:

.layout {
    display: flex;
}

یا:

.layout {
    display: grid;
}

بنابراین:

float را برای یادگیری، نگهداری کدهای قدیمی و کاربردهایی مانند قرار گرفتن تصویر کنار متن یاد بگیرید؛ اما برای Layoutهای مدرن، Flexbox و Grid را ابزار اصلی خود قرار دهید.

Overflow چیست؟

حالا به بخش دوم مقاله می‌رسیم.

فرض کنید یک Box اندازه مشخصی دارد:

.box {
    width: 300px;
    height: 100px;
}

اما داخل آن مقدار زیادی متن قرار داده‌ایم:

<div class="box">
    این متن بسیار طولانی است و فضای بیشتری از ارتفاع
    تعریف‌شده برای این عنصر نیاز دارد.
</div>

در چنین شرایطی محتوای داخل Box ممکن است از محدوده آن خارج شود.

به این وضعیت Overflow گفته می‌شود.

ویژگی overflow مشخص می‌کند مرورگر با محتوایی که از محدوده عنصر خارج شده چه کاری انجام دهد.

overflow: visible

مقدار پیش‌فرض معمولاً:

overflow: visible;

است.

در این حالت اگر محتوا از محدوده Box خارج شود، مرورگر اجازه می‌دهد محتوا بیرون از محدوده Box دیده شود.

مثلاً:

.box {
    width: 200px;
    height: 100px;
    overflow: visible;
}

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

overflow: hidden

با:

overflow: hidden;

محتوایی که از محدوده Box خارج شده، بریده و مخفی می‌شود.

مثلاً:

.box {
    width: 200px;
    height: 100px;
    overflow: hidden;
}

اگر متن یا تصویر از محدوده خارج شود، قسمت بیرون‌زده نمایش داده نمی‌شود.

نکته مهم

overflow: hidden را نباید فقط برای پنهان کردن مشکلات Layout استفاده کنیم.

ممکن است بخشی از محتوا، Shadow یا حتی اطلاعاتی که کاربر باید ببیند، بریده شود.

overflow: scroll

اگر بخواهیم همیشه امکان Scroll وجود داشته باشد:

.box {
    width: 300px;
    height: 150px;
    overflow: scroll;
}

مرورگر امکان پیمایش محتوای خارج‌شده را فراهم می‌کند.

overflow: auto

یکی از کاربردی‌ترین مقادیر:

overflow: auto;

است.

در این حالت مرورگر بر اساس نیاز تصمیم می‌گیرد که آیا Scrollbar لازم است یا خیر.

مثلاً:

.box {
    width: 300px;
    height: 150px;
    overflow: auto;
}

اگر محتوا داخل Box جا شود، معمولاً نیازی به Scroll نیست.

اگر محتوا بیشتر از فضای موجود باشد، امکان پیمایش فراهم می‌شود.

مقایسه مقادیر Overflow

overflow-x و overflow-y

گاهی می‌خواهیم رفتار Overflow افقی و عمودی متفاوت باشد.

برای این کار از:

overflow-x

و:

overflow-y

استفاده می‌کنیم.

مثلاً:

.box {
    overflow-x: auto;
    overflow-y: hidden;
}

یعنی:

• Overflow افقی قابل پیمایش باشد.

• Overflow عمودی مخفی شود.

در واقع overflow یک Shorthand برای overflow-x و overflow-y است.

مثال کاربردی: جعبه متن

فرض کنید می‌خواهیم یک قسمت برای نمایش توضیحات طولانی ایجاد کنیم:

<div class="description">
    این یک متن طولانی است که ممکن است بیشتر از
    فضای تعیین‌شده برای جعبه باشد.
    
    هدف ما این است که کاربر بتواند متن را
    بدون بزرگ شدن بیش از حد Box مشاهده کند.
</div>

CSS:

.description {
    width: 400px;
    height: 150px;
    padding: 15px;
    border: 1px solid #ccc;
    overflow: auto;
}

در این حالت اگر محتوا بیشتر از فضای موجود باشد، کاربر می‌تواند آن را Scroll کند.

مثال کاربردی: تصویر بزرگ

فرض کنید تصویری داریم که از Container بزرگ‌تر است:

<div class="image-container">
    <img src="large-image.jpg" alt="تصویر بزرگ">
</div>

CSS:

.image-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.image-container img {
    width: 500px;
}

در این حالت قسمت‌هایی از تصویر که خارج از Container قرار می‌گیرند، نمایش داده نمی‌شوند.

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

مثال کاربردی: اسکرول افقی

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

می‌توانیم Container را چنین تنظیم کنیم:

.table-container {
    overflow-x: auto;
}

مثلاً:

<div class="table-container">
    <table>
        ...
    </table>
</div>

در این حالت اگر جدول از عرض Container بیشتر باشد، کاربر می‌تواند آن قسمت را به صورت افقی پیمایش کند.

تفاوت Float و Overflow

این دو ویژگی کاملاً وظایف متفاوتی دارند.

Float

برای شناور کردن یک عنصر و قرار دادن محتوای اطراف در کنار آن استفاده می‌شود:

img {
    float: right;
}

Overflow

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

.box {
    overflow: auto;
}

بنابراین:

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

یک پروژه کوچک با Float و Clear

فرض کنید می‌خواهیم یک مقاله ساده بسازیم که تصویر آن در کنار متن قرار بگیرد.

HTML

<article class="article clearfix">

    <img
        src="article.jpg"
        alt="تصویر مقاله"
        class="article-image"
    >

    <h2>آشنایی با طراحی وب</h2>

    <p>
        طراحی وب یکی از مهارت‌های مهم در دنیای فناوری است.
        برای ساخت صفحات وب باید ابتدا ساختار HTML را یاد بگیریم
        و سپس با CSS ظاهر و Layout صفحه را طراحی کنیم.
    </p>

    <p>
        در این مثال تصویر مقاله در سمت راست قرار گرفته
        و متن در فضای کنار آن جریان پیدا می‌کند.
    </p>

</article>

CSS

.article {
    border: 1px solid #ddd;
    padding: 20px;
}

.article-image {
    width: 200px;
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

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

در این مثال:

1. تصویر Float شده است.

2. متن کنار تصویر قرار می‌گیرد.

3. margin-left بین تصویر و متن فاصله ایجاد می‌کند.

4. clearfix باعث می‌شود Container بهتر Float داخلی خود را دربر بگیرد.

پروژه دوم: استفاده از flow-root

همان پروژه را می‌توانیم با روش مدرن‌تر نیز بنویسیم:

.article {
    border: 1px solid #ddd;
    padding: 20px;
    display: flow-root;
}

.article-image {
    width: 200px;
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

در این حالت دیگر نیازی به کلاس clearfix نداریم.

flow-root یک Formatting Context جدید ایجاد می‌کند و به Container کمک می‌کند Float داخلی را در محدوده خود نگه دارد.

چند اشتباه رایج

استفاده از Float برای هر نوع Layout

این کار در پروژه‌های جدید معمولاً انتخاب مناسبی نیست.

برای Layoutهای چندستونه و ساخت رابط‌های مدرن بهتر است در ادامه دوره با Flexbox و Grid کار کنیم.

فراموش کردن clear

اگر با Floatهای قدیمی کار می‌کنید و عنصر بعدی نباید کنار Float قرار بگیرد، ممکن است نیاز به:

clear: both;

داشته باشید.

استفاده از ارتفاع ثابت همراه با محتوای نامشخص

مثلاً:

.box {
    height: 100px;
}

اگر محتوای داخل Box بیشتر شود، ممکن است با Overflow مواجه شوید.

به همین دلیل نباید بدون دلیل برای Containerهای متنی ارتفاع ثابت تعیین کنیم.

استفاده بی‌دلیل از overflow: hidden

گاهی توسعه‌دهنده برای حل یک مشکل ظاهری سریعاً می‌نویسد:

overflow: hidden;

اما این کار ممکن است بخشی از محتوا یا Shadow عناصر را قطع کند.

بنابراین ابتدا علت مشکل را پیدا کنید و سپس overflow مناسب را انتخاب کنید.

استفاده از overflow برای حل هر مشکل Layout

ممکن است در بعضی کدهای قدیمی ببینید:

.container {
    overflow: auto;
}

این کار در بعضی شرایط می‌تواند به مدیریت Floatها کمک کند، اما هدف اصلی overflow کنترل محتوای خارج‌شده است. برای ایجاد Formatting Context به شکل واضح‌تر، display: flow-root گزینه مناسب‌تری است.

تمرین‌های مقاله

تمرین ۱

یک تصویر بسازید که در سمت راست یک پاراگراف قرار بگیرد.

شرایط:

• عرض تصویر 200px باشد.

• تصویر float: right داشته باشد.

• بین تصویر و متن فاصله ایجاد کنید.

تمرین ۲

سه Box ایجاد کنید و با استفاده از:

float: left;

آن‌ها را کنار هم قرار دهید.

سپس بررسی کنید وقتی عرض صفحه کم می‌شود چه اتفاقی می‌افتد.

تمرین ۳

یک Footer ایجاد کنید که بعد از Floatهای قبلی قرار بگیرد.

از:

clear: both;

استفاده کنید.

تمرین ۴

یک Box با این مشخصات بسازید:

width: 300px;
height: 150px;

مقدار زیادی متن داخل آن قرار دهید.

سپس این چهار حالت را امتحان کنید:

overflow: visible;

overflow: hidden;

overflow: scroll;

overflow: auto;

تفاوت آن‌ها را مشاهده و یادداشت کنید.

تمرین ۵

یک Container بسازید که فقط شامل دو عنصر Float باشد.

ابتدا بدون flow-root آن را بررسی کنید.

سپس:

display: flow-root;

را به Container اضافه کنید و تفاوت را مشاهده کنید.

نکات مهم این مقاله

• float یک عنصر را به سمت چپ یا راست شناور می‌کند.

• Float معمولاً باعث می‌شود متن اطراف بتواند در کنار آن قرار بگیرد.

• Float از Flow عادی خارج می‌شود.

• clear برای قرار دادن عنصر در زیر Floatهای قبلی استفاده می‌شود.

• clear: both برای پاک‌سازی Floatهای چپ و راست بسیار رایج است.

• اگر Container فقط شامل Float باشد، ممکن است ارتفاع آن مطابق انتظار محاسبه نشود.

• clearfix یکی از روش‌های قدیمی مدیریت Float است.

• display: flow-root روش واضح‌تری برای دربرگرفتن Floatهای داخلی است.

• overflow نحوه برخورد مرورگر با محتوای خارج‌شده از محدوده عنصر را کنترل می‌کند.

• visible اجازه می‌دهد محتوا بیرون Box دیده شود.

• hidden محتوای خارج‌شده را می‌بُرد.

• scroll امکان پیمایش را فراهم می‌کند.

• auto در صورت نیاز امکان پیمایش را فراهم می‌کند.

• overflow-x و overflow-y برای کنترل جداگانه محورهای افقی و عمودی استفاده می‌شوند.

• برای Layoutهای مدرن، Flexbox و Grid معمولاً انتخاب مناسب‌تری از Float هستند.

جمع‌بندی

در این مقاله با سه مفهوم مهم CSS یعنی float، clear و overflow آشنا شدیم.

با float یاد گرفتیم چگونه یک عنصر را به سمت چپ یا راست شناور کنیم و اجازه دهیم متن اطراف آن جریان پیدا کند. سپس با clear یاد گرفتیم چگونه مشخص کنیم یک عنصر باید بعد از Floatها قرار بگیرد.

همچنین با مشکل معروف Containerهایی که شامل Float هستند آشنا شدیم و روش‌هایی مانند clearfix و display: flow-root را بررسی کردیم.

در بخش دوم مقاله نیز overflow را یاد گرفتیم؛ ویژگی‌ای که مشخص می‌کند وقتی محتوای داخل یک عنصر از محدوده آن خارج می‌شود، مرورگر چگونه با آن برخورد کند.

اکنون تقریباً تمام مباحث پایه مهم CSS قبل از ورود به Selectorهای پیشرفته‌تر را پشت سر گذاشته‌ایم.