راه های لغو float در HTML. عناصر شناور css را باز کنید

Float یک ویژگی CSS برای موقعیت یابی عناصر است. برای درک هدف و منشأ آن، می توانید به طراحی چاپ روی بیاورید. در یک طرح چاپی، تصاویر را می توان در صفحه قرار داد تا متن در اطراف آنها "جریان" شود. این معمولاً "پیچ بندی متن" نامیده می شود.

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

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

تنظیم ویژگی float به صورت زیر عمل می کند:

#سایدبار ( شناور: سمت راست؛ )

در مجموع 4 مقدار برای ویژگی float وجود دارد. چپ و راست برای جهت های مربوطه استفاده می شود. هیچ (پیش فرض) - تضمین می کند که عنصر شناور نخواهد شد. و inherit که می گوید رفتار باید همان عنصر والد باشد.

برای چه چیزی می توان از شناور استفاده کرد؟

علاوه بر قرار دادن متن در اطراف تصاویر، می توان از float برای ایجاد طرح بندی کل سایت استفاده کرد.

ویژگی float در مقیاس کوچکتر نیز مفید است. به عنوان مثال، یک منطقه کوچک را در صفحه وب سایت در نظر بگیرید. فرض کنید از float برای آواتار خود استفاده می کنید، وقتی اندازه تصویر را تغییر می دهید، اندازه متن متناسب با تصویر تنظیم می شود.

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

غیرفعال کردن ویژگی float

برای شناور، ویژگی مربوطه مشخص است. هر عنصری که دارای مجموعه ویژگی شفاف باشد، همانطور که انتظار می رود به بالا شناور نمی شود، بلکه در زیر عناصر float ظاهر می شود. شاید یک مثال در یک تصویر بهتر از کلمات توضیح دهد.

در مثال، نوار کناری به سمت راست شناور است (شناور: راست؛)، و ارتفاع آن کمتر از ناحیه محتوای اصلی است. بنابراین، فوتر به دلیل داشتن ارتفاع کافی و رفتار شناور آن را ایجاب می کند، بالاتر قرار می گیرد. برای رفع این وضعیت، باید ویژگی clear را تنظیم کند، که تضمین می کند عنصر در زیر عناصر شناور نمایش داده می شود.

#پانویس (روشن: هر دو؛ )

ویژگی clear می تواند چهار مقدار داشته باشد. هر دو، که بیشتر مورد استفاده قرار می گیرند، برای لغو شناور هر جهت استفاده می شود. چپ و راست - برای لغو شناور یکی از جهت ها استفاده می شود. هیچکدام - پیش‌فرض، معمولاً استفاده نمی‌شود مگر اینکه به وضوح نیاز باشد. inherit پنجمین مقدار خواهد بود، اما به طور عجیبی در اینترنت اکسپلورر پشتیبانی نمی شود. لغو فقط شناور چپ یا راست بسیار کمتر رایج است، اما مطمئناً اهداف خود را دارد.

سقوط بزرگ

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

این فروپاشی غیرمنطقی به نظر می رسد، اما جایگزین بدتر است. این مثال را در نظر بگیرید:

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

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

راه های لغو شناور

اگر می‌دانید که بعد از عناصر float، یک عنصر دیگر (مثلاً یک پاورقی) همیشه نمایش داده می‌شود، فقط باید ویژگی را پاک کنید: both; مانند مثال بالا، و به کار خود ادامه دهید. این ایده آل است زیرا به هیچ هک یا عناصر اضافی نیاز ندارد. البته همه چیز در زندگی ما آنقدر هموار نیست و مواقعی وجود دارد که این روش کافی نیست. بنابراین، لازم است چندین روش اضافی در زرادخانه خود داشته باشید.

• روش div خالییک div به معنای واقعی کلمه خالی استفاده می شود.
  . گاهی اوقات می توان از یک عنصر در جای خود استفاده کرد
  یا هر چیز دیگری، اما div اغلب مورد استفاده قرار می گیرد زیرا به طور پیش فرض سبک، هدف خاصی ندارد و بعید است که یک سبک کلی از طریق CSS برای آن اعمال شود. طرفداران نشانه گذاری خالص معنایی ممکن است این روش را دوست نداشته باشند، زیرا وجود یک div خالی معنای متنی ندارد و فقط به دلایل طراحی در صفحه قرار می گیرد. البته به بیان دقیق، حق با آنهاست، اما او کار خود را انجام می دهد و به کسی آسیب نمی رساند.
• روش سرریز.بر اساس این واقعیت که عنصر والد باید ویژگی سرریز را تنظیم کند. اگر این ویژگی روی خودکار یا مخفی تنظیم شود، عنصر والد برای جا دادن همه عناصر شناور گسترش می یابد. این روش از نظر معنایی صحیح تر به نظر می رسد زیرا به عناصر اضافی نیاز ندارد. با این حال، اگر قرار باشد از div دیگری فقط برای استفاده از این رویکرد استفاده کنید (منظور از div والد است)، با اضافه کردن یک div خالی مانند مثال قبلی خواهد بود. همچنین به یاد داشته باشید که خاصیت سرریز هدف متفاوتی دارد. مراقب باشید و اجازه ندهید برخی از محتوای شما ناپدید شوند یا نوارهای اسکرول غیر ضروری ظاهر شوند.
• روش تمیز کردن سادهاین روش از شبه انتخابگر فوق العاده CSS :after استفاده می کند. بسیار بهتر از استفاده از سرریز در عنصر والد. شما به سادگی یک کلاس اضافی به آن می دهید که به این صورت اعلام می شود: .clearfix:after (content: "."; visibility: hidden; display: block; height: 0; clear: two; ) این روش محتوای نامرئی را اضافه می کند و شناور را لغو می کند. و به هر حال، این تمام داستان در مورد نحوه استفاده از کد اضافی در مرورگرهای قدیمی نیست.

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

برای ارائه بهتر بصری، ترکیب بلوک های مشابه خوب است. به عنوان مثال، ما می خواهیم هر نوع از یک خط جدید شروع شود، در مورد ما نوع عنصر با رنگ تعیین می شود. اگر هر گروه عنصر ظرف مخصوص به خود را داشته باشد، می توانیم از روش سرریز یا "روش پاکسازی ساده" استفاده کنیم. یا می توانیم از روش div خالی بین هر یک از گروه ها استفاده کنیم. سه عنصر کانتینر یا سه دیوی خالی که برای کار شما بهتر است به عهده شماست.

مشکلات شناورها

مردم اغلب سعی می کنند از Float ها عبور کنند زیرا باید با آنها بسیار دقیق کار کرد. بیشتر باگ ها با IE6 همراه بودند. همانطور که طراحان وب بیشتر و بیشتر از IE6 پشتیبانی نمی کنند، ممکن است نگران این مسائل نباشید. اما برای کسانی که اهمیت می دهند، در اینجا یک لیست کوتاه وجود دارد.

جایگزین های شناور

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

یک بلوک متشکل از یک عکس و متن را بچینید و متن نباید در اطراف تصویر جریان داشته باشد.

چپ درست است، راست نیست

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

راه حل

بیایید سعی کنیم سبک بنویسیم. همه چیز با ستون سمت چپ واضح است:

عکس ( شناور: چپ؛ /* بسته بندی را تنظیم کنید */ حاشیه: 10 پیکسل؛ /* تورفتگی برای زیبایی */ display:inline؛ /* برای IE6، به طوری که تورفتگی سمت چپ دو برابر نشود */ )

اکنون نقاشی در سمت چپ است و متن در سمت راست آن را دور می زند. اما اگر متن بیشتری وجود داشته باشد، در زیر نقاشی "شیرجه" می شود (تصویر بالا را ببینید)، و ما به این نیاز نداریم.

اولین چیزی که به ذهن می رسد این است که متن را "شناور" کنید. اما در این صورت اگر عرض را مشخص نکنید، متن زیر عکس می افتد!

float:left/right به عرض نیاز دارد - در غیر این صورت هیچ چیز کار نخواهد کرد!

بیایید بیشتر فکر کنیم... .description(: XXXpx) ممکن است راه حل خوبی به نظر برسد. در واقع، در برخی شرایط این گزینه کار می کند. به عنوان مثال، اگر اندازه تصویر هنوز تنظیم شده باشد. بیایید بگوییم که این یک بلوک خبری لاستیکی است. تصویر نمی تواند عریض تر باشد، مثلاً 200 پیکسل، اما متن از قبل کشیده شده و کل عرض باقی مانده را اشغال می کند.

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

شما می توانید با افزودن :hidden; برای یک ستون متنی با انجام این کار، زمینه قالب بندی جدیدی را برای آن تنظیم می کنیم (به زودی به این موضوع با جزئیات بیشتری پرداخته خواهد شد).

تنها مرورگری که به این موضوع واکنش نادرست نشان می دهد، البته IE6 است. ما ستون را به طور خاص برای آن تنظیم می کنیم، به عنوان مثال، "float" (نیازی به تنظیم عرض ندارید).

بنابراین، راه حل مشکل به صورت زیر است:

عکس ( float: چپ؛ /* شناور را تنظیم کنید */ margin:10px؛ /* تورفتگی برای زیبایی */ display:inline; /* برای IE6، به طوری که تورفتگی سمت چپ دو برابر نشود */ ) .description( overflow:hidden ; ) * html .description( float:left; )

مثل همیشه در شرایط جنگی از .

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

دنباله نمایش عناصر HTML

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

تصویر زیر نمونه ای از ترتیب استاندارد برای نمایش عناصر است:

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

شناور CSS

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

این ویژگی به طور گسترده ای در چیدمان استفاده می شود، بنابراین درک نحوه عملکرد آن بسیار مهم است. Float برای ایجاد طرح‌بندی‌های چند ستونی، منوهای ناوبری، گالری‌ها و موارد دیگر استفاده می‌شود.

بیایید به مقادیری که خاصیت float می تواند بگیرد نگاه کنیم. فقط سه مورد از آنها وجود دارد:

• چپ - عنصر در سمت چپ تراز شده است. عناصر پایین تر در جریان اطراف آن در سمت راست جریان دارند.
• راست - مقدار مخالف قبلی. عنصر در سمت راست تراز شده است و عناصر پایین تر در جریان در اطراف آن به سمت چپ در امتداد لبه چپ جریان دارند.
• هیچ - عنصر بسته نمی شود و در موقعیت عادی خود قرار دارد.

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

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

در زیر یک مثال تصویری از نحوه عملکرد ویژگی float با مقادیر چپ و راست آورده شده است:

همانطور که می بینید، CSS به شما این امکان را می دهد که به سرعت و به راحتی یک طرح چند ستونی را تنها با استفاده از دو ویژگی به صورت جفت ایجاد کنید - float و width . و تنظیم متن برای قرار دادن در اطراف یک تصویر ساده تر است - ما به سادگی ویژگی float:right را روی آن اعمال کردیم.

باز کردن: خاصیت پاک کردن

در چیدمان، تقریباً همیشه نیاز به تنظیم مجدد جریان پس از یک عنصر خاص وجود دارد. به عنوان مثال، در موردی که بلوک اصلی یک صفحه وب در اطراف یک ستون کناری (نوار کناری) پیچیده شده است، به احتمال زیاد باید بعد از نوار کناری آن را باز کنیم. از این گذشته ، این قطعاً آخرین عنصر در صفحه نیست ، و حداقل یک پاورقی نیز وجود دارد - قسمت پایین صفحه ، "پانویس" ، که باید در پایین قرار داشته باشد ، جایی حرکت نکند و دور چیزی نپیچید

اکنون در اسکرین شات، بسته بندی پس از نوار کناری لغو نمی شود، و بلوک پاورقی به طرز عجیبی رفتار می کند و سعی می کند اطراف عنصر بالا را بپیچد (اما هیچ چیز کار نمی کند، زیرا عرض حداقل یک عنصر این اجازه را نمی دهد - عنصر " گیر می کند»):

چگونه بسته بندی را مجددا تنظیم کنیم؟ ویژگی واضح و مقادیر آن به ما در این امر کمک می کند:

• left - عنصری که ویژگی clear:left برای آن اعمال می شود دیگر با خاصیت float:left اطراف عنصر شناور نمی شود، اما float سمت راست حفظ می شود.
• right - عنصری که خاصیت clear:right به آن اعمال می شود، با خاصیت float:right جریان اطراف عنصر را متوقف می کند، اما جریان چپ باقی می ماند.
• هر دو - بسته بندی را از همه طرف به طور کامل لغو می کند. عنصر به سمت پایین حرکت می کند و یک جریان استاندارد را تشکیل می دهد. جریان اطراف عناصر متعاقب آن نیز تأثیر خود را متوقف می کند.
• هیچ - پاکسازی را لغو می کند. عنصر طبق معمول رفتار می کند و تحت تأثیر تنظیمات شناور قرار می گیرد.

بیایید از دانشی که به دست آورده ایم استفاده کنیم و پاورقی خود را روشن کنیم:both:

در نتیجه پاورقی تراز شد و در جای خود قرار گرفت. ضمناً نتیجه خاصیت margin-bottom:10px که قبلاً روی نوار کناری اعمال شده بود نیز قابل مشاهده شد.

پشتیبانی از مرورگر

ویژگی های float و clear توسط همه مرورگرهای در حال استفاده از جمله IE6 و IE7 پشتیبانی می شوند.

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

عرض عناصر

اگر عناصر شناور کل عرض موجود را اشغال کنند، عناصر باقیمانده به دنبال آنها در یک خط جدید شروع می شوند. برای انجام این کار، عرض کل عناصر باید 100٪ باشد. مثال 1 نحوه ایجاد فلش در یک خط را نشان می دهد.

مثال 1: استفاده از عرض

هر بلوک با یک فلش اکنون 50٪ عرض را اشغال می کند و آنها تا 100٪ عرض جمع می کنند، بنابراین پاراگراف پس از فلش روی یک خط جدید شروع می شود.

این روش به ندرت مورد استفاده قرار می گیرد، زیرا همیشه نمی توان به طور صریح عرض عناصر را مشخص کرد و این روش مشکل ارتفاع بلوک و پس زمینه آن را حل نمی کند (شکل 1).

برنج. 1. بدون پر کردن پس زمینه

استفاده از سرریز

شناور تمیز کردن 2

همانطور که در شکل نشان داده شده است یک صفحه وب ایجاد کنید. 1. برای نشان دادن روبل، از نماد ₽ استفاده کنید.

پاسخ نشان می دهد