نقش پراپرتی float

مقدمه

با استفاده از پراپرتی float می‌توانیم ترتیبی دهیم که یک عنصر در سمت راست یا چپ کانتینر خود شناور شده و متن و سایر عناصر Inline در اطراف آن پراکنده شوند. در واقع، هدف از معرفی پراپرتی float در CSS این بود که به کاربران امکان انجام برخی امور ساده‌ی مربوط به طرح‌بندی صفحه مانند قرار دادن متن در اطراف یک تصویر، داده شود. کاربران فوراً متوجه شدند که با استفاده از این پراپرتی می‌توانند نه فقط تصاویر، بلکه هر چیزی را شناور کنند و به این ترتیب بود که این پراپرتی بر خلاف فلسفه و هدف ابتدایی خود برای طرح‌بندی کل صفحه مورد استفاده قرار گرفت. بعدها با ظهور و معرفی روش‌های مدرن‌تر برای طرح‌بندی صفحه، پراپرتی float به شغل سابق و اصلی خود بازگشت. تمرکز ما نیز در اینجا تنها روی نقش اصلی پراپرتی float است.

پراپرتی float

در حالت پیش‌فرض، محتوا به همان ترتیبی که در فایل HTML آورده شده، در خروجی به عنوان بخشی از normal flow نمایش داده می‌شود اما شناورسازی یک عنصر باعث می‌شود که آن عنصر در سمت راست یا چپ عنصر والد خود نمایش داده شود. محتوای بعدی که شناور نیست، فضایی را که قبلاً توسط عنصر شناور شده اشغال شده بود، پر می‌کند. تصویر زیر نمایی از یک عنصر شناور شده در سمت راست و تأثیر آن روی ادامه‌ی محتوا را نشان می‌دهد.

برای شناورسازی یک عنصر، باید از یک پراپرتی با نام float استفاده کنیم که می‌تواند یکی از مقادیر left، right یا none را دریافت کند.

CSS

.floating{
  background-color: red;
  float: right;
  height: 3rem;
  width: 3rem;
}

در این مثال، باکس قرمز در سمت راست شناور شده و متن در اطراف آن قرار گرفته است. حالا مثال زیر را ببینید که در آن از پراپرتی float برای دو عنصر استفاده شده است.

CSS

.floating, .floating-2{
  float: right;
  height: 3rem;
  width: 3rem;
}

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

البته باید در نظر داشته باشید که برای اینکه عناصر شناور شده در یک سطر قرار گیرند، باید عرض ترکیب‌شده‌ی این عناصر از عرض عنصر والد بیشتر نباشد. در غیر این صورت، محتوا به سطر بعدی منتقل می‌شود.

پراپرتی clear

با استفاده ازپراپرتی clear می توانیم مانع از قرار گرفتن یک عنصر در امتداد یک عنصر شناور شده شویم. این پراپرتی می‌تواند یکی از مقادیر right، left یا both را دریافت کند که به‌ترتیب، باعث لغو شناورسازی از راست، چپ یا هر دو جهت می‌شود. تصویر زیر نشان می‌دهد که چطور استفاده از پراپرتی clear باعث می‌شود که از ادامه‌ی روند شناورسازی توسط یک عنصر جلوگیری شود. در واقع، چنین عنصری فرض می‌کند که شناورسازی رخ نداده و روال عادی را پی می‌گیرد.

حالا مثال زیر را ببینید.

CSS

.clear{
  clear: both;
}