ویژگی float در CSS | آموزش کنار هم قرار دادن عناصر HTML


نویسنده:
چهارشنبه ۱۴ خرداد ۱۳۹۹
ویژگی float در CSS

در این جلسه از آموزش رایگان HTML و CSS می‌خواهیم به ویژگی float در CSS بپردازیم.

همانطور که می‌دانید عناصری که در دسته inline-level وجود دارند، بصورت پیشفرض می‌توانند در کنار هم قرار بگیرند. برای مثال اگر شما چند تگ a یا تگ span را پشت هم بنویسید، در خروجی همه آنها بصورت یک سطر در کنار هم نمایش داده می‌شوند.

اما برای عناصری که در دسته block-level هستند چه؟ اگر بخواهیم این عناصر را در کنار هم قرار دهیم باید چه کنیم؟ برای اینکار چندین راه مختلف وجود دارد که ساده‌ترین، ابتدایی‌ترین و پرکاربرد‌ترین آن‌ها استفاده از ویژگی float در CSS است.

ویژگی float در CSS دقیقا چه کاری انجام می‌دهد؟

ویژگی float در CSS می‌تواند عناصر HTML را در جهت خاصی شناور کند. به مثال زیر دقت کنید:

توضیح کد بالا: در این مثال با استفاده از تگ div یک باکس ایجاد کردیم. درون این باکس از یک تصویر و پاراگراف استفاده کردیم. به خروجی کد دقت کنید:

خروجی کد بالا:

CSS floats

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.


حال اگر بخواهیم تصویر را به سمت راست شناور کنیم. طوری که متن در سمت چپ آن قرار گیرد، می‌توانیم از ویژگی float برای تصویر استفاده کنیم. این ویژگی کلاً می‌تواند ۲ مقدار به خود بگیرد. right یا left که به ترتیب یعنی شناور شدن به سمت راست یا چپ. به کد زیر و خروجی آن دقت کنید:

خروجی کد بالا:

CSS floats

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.


به همین راحتی توانستیم تصویر را در جهت دلخواه خود شناور کنیم!

نکته: استفاده از ویژگی float مشکلاتی را هم ایجاد می‌کند. اگر به یک عنصر float بدهیم، پدر آن عنصر دیگر آن را حس نمی‌کند. یعنی انگار همچین فرزندی ندارد!

برای حل مشکلی که در نکته بالا گفته شد دو راه حل وجود دارد. اولین و ساده‌ترین آن را در مثال بالا مشاهده کردید. فقط کافیست به عنصر پدر (در این مثال عنصر div) ویژگی overflow را با مقدار auto بدهید.

توجه: عملکرد ویژگی overflow در درس‌های آینده توضیح داده خواهد شد. فعلاً می‌توانید آن‌را حفظ کنید.

راه حل دوم استفاده از کلاس clearfix است که بسیار رایج تر است. در ادامه این روش را توضیح خواهیم داد.

کلاس clearfix چیست و چکار می‌کند؟

همانطور که گفتیم برای مشکل float راه حلی ارائه شد بنام کلاس clearfix. برای استفاده از این کلاس کافیست کد زیر را در قسمت CSS صفحه وب خود قرار دهید (فرقی نمی‌کند کدهای CSS شما Internal باشد یا External):

توضیح اینکه هرکدام از ویژگی‌های تعریف شده برای کلاس clearfix چه کاری انجام می‌دهند، به دلیل سطح دانش فعلی شما امکانپذیر نیست. همانطور که گفتم. فعلا می‌توانید فقط این کدها را حفظ کنید.

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

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

همانطور که می‌بینید بجای استفاده از ویژگی overflow در عنصر div پدر، از کلاس clearfix استفاده شده.

چینش عناصر HTML با استفاده از float

حال می‌خواهیم مثالی از چینش چندین عنصر block-level در کنار هم بزنیم تا با کاربرد‌های float بیشتر آشنا شویم. به کد زیر دقت کنید:

خروجی کد بالا:

فرزند اول
فرزند دوم
فرزند سوم

در این مثال با اینکه به هرکدام از عناصر div که کلاس child دارند عرض و ارتفاع ۱۰۰ پیکسل دادیم، ولی با این حال در هنگام نمایش در کنار هم نمایش داده نمی‌شوند. خب این به دلیل block-level بودن این عناصر طبیعی است.

برای چیدن این عناصر در کنار هم کافیست از ویژگی float برای عناصر child استفاده کنیم:

خروجی کد بالا:

فرزند اول
فرزند دوم
فرزند سوم


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

دیدگاهتان را بنویسید

2 پاسخ به “ویژگی float در CSS | آموزش کنار هم قرار دادن عناصر HTML”

  1. aminrezaee گفت:

    با سلام اگ تا بع فرزند درون چندین تگ div قرار داشت ما از کلاس clearfix در کدام تگ div استفاده کنیم ؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *