آموزش طرح بندی CSS – شناور و واضح

12 جولای 2021

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

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


ویژگی شناور

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

این floatویژگی می تواند یکی از مقادیر زیر را داشته باشد:

  • left – این عنصر در سمت چپ ظرف خود شناور است
  • right – این عنصر در سمت راست ظرف خود شناور است
  • none– این عنصر شناور نیست (دقیقاً همان جایی که در متن وجود دارد نمایش داده می شود). این پیش فرض است
  • inherit – این عنصر مقدار float والدین خود را به ارث می برد

در ساده ترین کاربرد آن ، floatمی توان از این ویژگی برای بسته بندی متن به دور تصاویر استفاده کرد.


مثال – شناور: درست؛

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

مثال

img {
  float: right;
}

مثال – شناور: چپ ؛

مثال زیر مشخص می کند که یک تصویر باید در یک متن به سمت چپ شناور باشد :

مثال

img {
  float: left;
}

مثال – بدون شناور

در مثال زیر تصویر دقیقاً در محلی که در متن وجود دارد نمایش داده می شود (float: none؛):مثال

img {
  float: none;
}

مثال – شناور در کنار یکدیگر

به طور معمول عناصر div بر روی یکدیگر نمایش داده می شوند. با این حال ، اگر ما استفاده float: leftکنیم ، می توانیم عناصر را کنار هم شناور کنیم:

مثال

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.