عناصر شناور

عناصر شناور در css

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

عناصر شناور  عناصر شناور عناصر شناور Floating elements in CSS

عناصر شناور

چگونه عناصر شناور می شوند

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

خاصیت Float

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

  • None : مقدار پیشفرض (هیچ)
  • Left : عنصری که این خاصیت برای آن تخصیص یابد در سمت چپ صفحه و یا در سمت چپ عنصر پدر خود قرار خواهد گرفت و عناصر پس از آن نیز در کنار این عنصر شناور خواهند شد.
  • Right : عنصری که این خاصیت برای آن تخصیص یابد در سمت راست صفحه و یا در سمت راست عنصر پدر خود قرار خواهد گرفت و عناصر پس از آن نیز در کنار این عنصر شناور خواهند شد.

خاصیت float برای ایجاد و تنظیم بخش navigation ( منوی سایت ) مناسب است

عناصر شناور در کنار یکدیگر

اگر شما عناصر متعددی را بعد از یکدیگر شناور کنید، آنها تا جایی که فضا هست کنار یکدیگر شناور خواهند شد.
در اینجا ما گالری عکسی با استفاده از خاصیت float ساخته ایم :

 

عناصر شناور عناصر شناور عناصر شناور Capture

عناصر شناور

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

با استفاده از خاصیت clear ، یک خط متن را به گالری تصویر اضافه کنید:

تمام خواص شناور CSS

تعداد در ستون “CSS” نشان می دهد که خاصیت در چه نسخه ای از CSS تعریف شده است (CSS1 CSS2).
خاصیت توضیحات مقادیر CSS
clear مشخص می کند که کدام سمت از عنصر شناور شده برای سایر عناصر اجازه داده شده نیست left
right
both
none
inherit
۱
float مشخص می کند که یک باکس شناور شود یا نه left
right
none
inherit
۱

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید