Lesson 31 / الدرس 31

float & clear / خاصيتا float و clear

Floating an image so text wraps around it, using clear to stop the wrap, the collapsed-parent problem — and an honest look at why float is no longer how pages are laid out.

جعل صورة عائمة ليلتف النص حولها، واستخدام clear لإيقاف الالتفاف، ومشكلة انهيار العنصر الأب — ونظرة صادقة إلى سبب أن float لم تعد الطريقة التي تُبنى بها الصفحات.

Before Flexbox and Grid existed — the tools you are about to meet next in this course — float was how developers built entire page layouts, pushing whole columns to one side of the page with hacks and workarounds. That job is over; nobody should reach for float to lay out a page today. What survives is one honest, still-useful job: pulling a single element, usually an image, to one side and letting text wrap around it — and you will keep meeting float in code written before Flexbox and Grid took over, so it is worth twenty minutes of your time.

قبل أن توجد Flexbox والشبكة (Grid) — الأداتان اللتان ستقابلهما بعد قليل في هذه الدورة — كانت float هي الطريقة التي يبني بها المطورون تخطيط الصفحة كله، بدفع أعمدة كاملة إلى جانب من الصفحة بحيل وحلول التفافية. وهذه المهمة انتهت؛ لا ينبغي لأحد اليوم أن يلجأ إلى float لتخطيط صفحة كاملة. وما بقي هو مهمة واحدة صادقة وما زالت مفيدة: سحب عنصر واحد، صورة غالبًا، إلى جانب وترك النص يلتف حوله — وستظل تقابل float في كود كُتب قبل أن تسيطر Flexbox والشبكة، فالأمر يستحق عشرين دقيقة من وقتك.

`float`: pull to a side, let text wrap

float: اسحب إلى جانب، ودع النص يلتف

img {
    float: left;
    margin-right: 1rem;
}

float: left pulls the image to the left edge of its container and takes it out of the normal flow — but unlike display: none, it does not disappear: the paragraph text that follows simply wraps around its remaining box instead of starting below it. float: right does the same thing from the other edge.

تسحب float: left الصورة إلى الحافة اليسرى من والدها وتُخرجها من التدفق العادي — لكن خلافًا لـ display: none، لا تختفي: بل يلتف نص الفقرة التالية حول صندوقها المتبقي بدل أن يبدأ أسفله. وتفعل float: right الشيء نفسه من الحافة الأخرى.

`clear`: stopping the wrap

clear: إيقاف الالتفاف

h2 {
    clear: both;
}

Without clear, a heading right after a floated image would try to wrap alongside it too, squeezed into the leftover space next to it. clear: both tells an element to ignore floats completely and start below them instead — left and right clear only a float on that one side.

بدون clear، سيحاول العنوان الذي يأتي مباشرة بعد صورة عائمة أن يلتف بجانبها أيضًا، مضغوطًا في المساحة المتبقية بجانبها. أما clear: both فتخبر العنصر أن يتجاهل العوائم تمامًا ويبدأ أسفلها بدلًا من ذلك — و left و right تُزيلان الالتفاف حول عائم في تلك الجهة فقط.

The collapsed-parent problem

Because a floated element leaves the normal flow entirely, its height stops counting toward its parent's height — from the parent's point of view, a container holding only floated children looks empty, exactly zero pixels tall. Any border or background color you put on that parent collapses along with it, seeming to disappear even though the floated content is still clearly visible on the page. This is one of the oldest, most confusing bugs in CSS, and it is the main reason float earned its bad reputation.

.gallery {
    border: 2px solid #4f8cff;
    overflow: auto;
}

A gallery holding two floated boxes. Delete overflow: auto from .gallery and watch its blue border collapse to a thin line above the floats, as if it had no children at all — add it back and the parent "contains" its floats again, the same overflow property from two lessons ago, reused for an entirely different problem.

معرض يضم صندوقين عائمين. احذف overflow: auto من .gallery وشاهد حدودها الزرقاء تنهار إلى خط رفيع فوق العناصر العائمة، كأنه لا أبناء له على الإطلاق — أعدها وسيعود الوالد "يحتوي" عائماته من جديد، نفس خاصية overflow من درسين مضى، معاد استخدامها لمشكلة مختلفة تمامًا.

إن بدت حاوية بحدود أو خلفية وكأنها انهارت إلى لا شيء فور أن جعلت أبناءها عائمين، فهذا هو السبب في الغالب — لا خطأ إملائي ولا نمط ناقص. أعطِ الوالد overflow: auto (أو overflow: hidden، إن لم يكن لديك ما يحتاج أن يفيض خارجه) وسيتمدد ليحتوي عناصره العائمة من جديد.

Keep float for the one job it still does honestly: pulling a single image or pull-quote to one side of a block of text. For laying out whole pages — columns, navigation bars, card grids — reach for Flexbox or Grid, the tools built for exactly that job, coming up next in this course. You will still meet float reading older CSS, which is exactly why it is worth knowing rather than worth using.

احتفظ بـ float للمهمة الوحيدة التي ما زالت تؤديها بصدق: سحب صورة واحدة أو اقتباس بارز إلى جانب من كتلة نص. أما لتخطيط صفحات كاملة — أعمدة، أو أشرطة تنقل، أو شبكات بطاقات — فاستخدم Flexbox أو الشبكة، الأداتان المبنيتان لهذه المهمة بالضبط، والقادمتان بعد قليل في هذه الدورة. وستظل تقابل float عند قراءة كود CSS قديم، وهذا بالضبط سبب استحقاقها أن تُعرف لا أن تُستخدم.

Still the right tool: wrapping body text around a single image or pull-quote
No longer the right tool: multi-column page layout — that job belongs to Flexbox and Grid now
Still worth recognizing: a huge amount of CSS written before Flexbox existed still uses it for layout

Try it live / جرّب بنفسك

<div class="article">
    <img src="garden.jpg" alt="A small garden with flowers">
    <p>Write a sentence or two here so the text wraps around the floated image.</p>
    <h2>Next section</h2>
</div>

.article {
    border: 2px solid #4f8cff;
    padding: 1rem;
    /* stop this border from collapsing */
}

img {
    width: 100px;
    height: 100px;
    background-color: #d8dee9;
    /* float this image */
}

h2 {
    /* push this below the float */
}

Preview / المعاينة

Check yourself / اختبر نفسك

1. What happens to the paragraph text right after a floated image?

2. A container holds only floated children and its border seems to have vanished. What is the likely cause?

3. Which value of clear pushes an element below floats on both sides?

Your task / مهمتك

Build a short article intro: float an image to the left of a paragraph so the text wraps around it, add a heading below that uses clear: both to start on its own line, and stop the container's border from collapsing by adding the right overflow value to it.

ابنِ مقدمة مقالة قصيرة: اجعل صورة عائمة إلى يسار فقرة نص ليلتف النص حولها، وأضف عنوانًا أسفلها يستخدم clear: both ليبدأ في سطره الخاص، وأوقف انهيار حدود الحاوية بإضافة قيمة overflow المناسبة لها.

The image uses float: left (or right) with a margin so text does not touch it الصورة تستخدم float: left (أو right) مع هامش حتى لا يلامسها النص
The heading below uses clear: both and starts on a clean new line العنوان أسفل يستخدم clear: both ويبدأ في سطر جديد نظيف
The container's border no longer collapses around the floated content حدود الحاوية لم تعد تنهار حول المحتوى العائم