در حال بارگذاری...

شناوری و پاک‌سازی (Float و Clear)

درس z-index لایه‌های هم‌پوشان را چید. float و clear مسئلهٔ کلاسیک دیگری را حل می‌کنند: متن کنار تصویر یا باکس راهنما بپیچد، بعد تصمیم بگیرید بلوک بعدی باید زیر آن floatها بیفتد. الگوی پیچیدن را یاد بگیرید — چیدمان صفحه را به Flexbox و Grid بسپارید.

جعبهٔ ابزار float و clear

📊 float و clear یک‌نگاهه

ابزار	کار روزمره
`float: left`	جعبه را چپ می‌کشد؛ محتوای بعدی می‌تواند سمت راست بپیچد
`float: right`	جعبه را راست می‌کشد؛ محتوا سمت چپ می‌پیچد
`float: none`	پیش‌فرض — بدون رفتار float
`clear: left`	بلوک بعدی کنار float چپ نمی‌نشیند
`clear: right`	بلوک بعدی کنار float راست نمی‌نشیند
`clear: both`	بلوک بعدی زیر هر float چپ یا راست می‌افتد
Clearfix	پدر دور فرزندان float قد می‌کشد (مثلاً با `overflow` یا `display: flow-root`)

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

تصویر را float کنید، داستان بپیچد

شکل را چپ بکشید تا پاراگراف‌ها کنارش جاری شوند. به تصویر عرض بدهید تا پیچیدن عمدی به نظر برسد، نه تصادفی.

تصویر float چپ

css

.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}

باکس راهنما را سمت دیگر float کنید

نکته یا نقل کوتاه می‌تواند راست بنشیند و متن بدنه چپ بپیچد. حاشیه بگذارید تا متن به جعبه نچسبد.

باکس راهنما float راست

css

.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}

clear — دیگر کنار float ننشین

وقتی عنوان، فوتر یا بخش بعدی باید از خط تازه زیر floatها شروع شود، از clear استفاده کنید. clear: both همان «زیر همهٔ floatها برو»ی روزمره است.

clear both بعد از float

css

.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}

پدر جمع‌شده clearfix می‌خواهد

اگر پدر فقط فرزندان float داشته باشد، ارتفاعش ممکن است جمع شود و پس‌زمینه یا حاشیه خراب به نظر برسد. رفع آرام: overflow: auto (یا hidden) روی پدر — یا مدرن‌تر display: flow-root.

clearfix با overflow

css

.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}

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

flow-root — بلوک دربرگیرندهٔ شفاف

display: flow-root یک block formatting context تازه می‌سازد تا پدر floatهایش را در بر بگیرد، بدون اثرهای جانبی overflow.

clearfix با flow-root

css

.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}

عادت آرام float

float را برای متن‌کناررسانه و پیچیدن کوچک نگه دارید. برای نویگیشن، ستون صفحه و شبکهٔ کارت، Flexbox یا Grid را ترجیح دهید. یادتان باشد: position می‌نشاند؛ z-index لایه می‌دهد؛ float می‌پیچاند.

الگوی رسانه به‌علاوهٔ متن

css

.feature {
display: flow-root;
}

.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}

.feature__copy {
/* کنار رسانه می‌پیچد؛ در صورت نیاز طبیعی clear می‌شود */
}

خودتان امتحان کنید

تصویری را چپ float کنید داخل مقاله‌ای پر پاراگراف و حاشیه را تنظیم کنید.
باکس نکته را راست float کنید و متن بدنه را کنارش بپیچانید.
به فوتری که کنار تصویر بالا آمده clear: both بدهید.
پدر جمع‌شده را با overflow: auto یا display: flow-root درست کنید.
یک جمله بنویسید: کی Flex را به‌جای float انتخاب می‌کنید؟

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

ساختن کل چیدمان صفحه با float به‌جای Flex/Grid
فراموش کردن clear تا فوتر کنار تصویر بالا بیاید
بی‌توجهی به پدر جمع‌شده دور فرزندان float
دیدن float مثل position یا مثل z-index
گذاشتن clear فقط روی خود جعبهٔ float وقتی منظورتان بلوک بعدی بوده

جمع‌بندی

float جعبه را کنار می‌کشد تا محتوای بعدی بپیچد
clear بلوک‌های بعدی را مجبور می‌کند زیر float بیفتند
پدر فقط‌float ممکن است جمع شود — clearfix با overflow یا flow-root
float را برای الگوی پیچیدن نگه دارید؛ ساختار صفحه با Flex/Grid
جای‌گذاری و stacking ابزار خودشان را دارند (position، z-index)

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان