صفحه اصلی / آموزش CSS / بخش بیست و دوم- آموزش float و clear در css

بخش بیست و دوم- آموزش float و clear در css

قدم قبلی > < قدم بعدی

بخش بیست و دوم- آموزش float و clear در css

 

CSS Layout – آموزش float و clear

ویژگی شناور CSS مشخص می کند که یک عنصر باید شنا کند.

ویژگی مشخصی CSS مشخص می کند که چه عناصر می تواند در کنار عنصر پاک شده شناور باشد و در چه طرفی.

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

ملک شناور می تواند یکی از مقادیر زیر را داشته باشد:

چپ – عنصر به سمت چپ ظرف آن شناور است
راست- عنصر به سمت راست ظرف آن شناور است
none – عنصر شناور نیست (فقط در جایی که در متن ظاهر می شود نمایش داده می شود). این پیش فرض است
inherit – عنصر ارزش شناور والد خود را به ارث می برد
در ساده ترین استفاده، می توان از ویژگی های شناور استفاده کرد تا متن را در اطراف تصاویر قرار دهد.

مثلا – شناور: راست؛
مثال زیر مشخص می کند که یک تصویر باید در یک متن به سمت راست حرکت کند:

آناناس Lorem ipsum dolor sit amet، consectetur adipiscing elit. فاولوس امیدته، بینایی و تقسیم بین المللی است، به نظر می رسد ایدئولوژیک، ویتیو scelerisque enim ligula venenatis dolor. Maecenas nisl est، ultrices nec congue eget، auctor vitae massa. لوسنت لثه Vestibulum august ut aliquet. Mauris ante ligula، facilisis sed ornare eu، lobortis in odio. مجلس نمایندگان مجلس هفتاد و هشتم هجری قمری می کند. Nunc sagittis dictum nisi، sed ullamcorper ipsum dignissim ac …

مثال
img {
شناور: راست؛
}
به عنوان مثال – شناور: چپ؛
مثال زیر مشخص می کند که تصویر باید در یک متن به سمت چپ شناور شود:

آناناس Lorem ipsum dolor sit amet، consectetur adipiscing elit. فاولوس امیدته، بینایی و تقسیم بین المللی است، به نظر می رسد ایدئولوژیک، ویتیو scelerisque enim ligula venenatis dolor. Maecenas nisl est، ultrices nec congue eget، auctor vitae massa. لوسنت لثه Vestibulum august ut aliquet. Mauris ante ligula، facilisis sed ornare eu، lobortis in odio. مجلس نمایندگان مجلس هفتاد و هشتم هجری قمری می کند. Nunc sagittis dictum nisi، sed ullamcorper ipsum dignissim ac …

مثال
img {
شناور به سمت چپ؛
}
مثال – بدون شناور
در مثال زیر تصویر در جایی که در متن رخ می دهد نمایش داده می شود (شناور: none؛):

آناناس Lorem ipsum dolor sit amet، consectetur adipiscing elit. فاولوس امیدته، بینایی و تقسیم بین المللی است، به نظر می رسد ایدئولوژیک، ویتیو scelerisque enim ligula venenatis dolor. Maecenas nisl est، ultrices nec congue eget، auctor vitae massa. لوسنت لثه Vestibulum august ut aliquet. Mauris ante ligula، facilisis sed ornare eu، lobortis in odio. مجلس نمایندگان مجلس هفتاد و هشتم هجری قمری می کند. Nunc sagittis dictum nisi، sed ullamcorper ipsum dignissim ac …

مثال
img {
شناور: هیچ؛
}
املاک روشن
ملک روشن مشخص می کند که چه عناصر می توانند در کنار عنصر پاک شده شناور شوند و در کدام طرف.

ملک روشن می تواند یکی از مقادیر زیر را داشته باشد:

none – اجازه می دهد تا عناصر شناور در هر دو طرف. این پیش فرض است
چپ – عناصر شناور در سمت چپ مجاز نیست
راست – عناصر شناور در سمت راست مجاز نیست
هر دو – عناصر شناور در سمت چپ یا سمت راست مجاز نیست
inherit – عنصر ارزش مشخصی از والد خود را به ارث برده است
شایع ترین روش استفاده از ملک روشن بعد از استفاده از یک ویژگی شناور در یک عنصر است.

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

مثال زیر پوسته را به سمت چپ باز می کند. به این معنی که عناصر شناور در سمت چپ (div) اجازه داده می شود:

مثال
div {
روشن: چپ؛
}

Hack Clearfix
اگر یک عنصر بلندتر از عنصر حاوی آن باشد، و آن شناور است، آن را “سرریز” خارج از ظرف آن:

بدون Clearfix

با Clearfix

سپس می توانیم سرریز را اضافه کنیم: auto؛ به عنصر حاوی این مشکل رفع:

مثال
.clearfix {
سرریز: خودکار؛
}
سرریز: خودکار clearfix به خوبی کار می کند تا زمانی که شما قادر به نگه داشتن کنترل حاشیه و padding خود (دیگر شما ممکن است می بینید اسکرول باری). با این حال، هک جدید اصلاحیه جدید مدرن، استفاده از آن امن تر است، و کد زیر برای اکثر صفحات وب استفاده می شود:

مثال
.clearfix :: after {
محتوا: “”؛
روشن: هر دو؛
نمایش: جدول؛
}

گام قبلی > < گام بعدی

نوشته بخش بیست و دوم- آموزش float و clear در css اولین بار در تیک تم. پدیدار شد.


منبع مطلب

این مطالب را نیز ببینید!

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

  آموزش ساخت جدول در CSS   ساخت جدول در CSS برای شروع و قبل …

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

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