Layout - ویژگی float و clear

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی float مشخص می‌کند چگونه یک عنصر می‌بایست float شود.[۱]

ویژگی clearمشخص می‌کند که چه عنصری می‌تواند کنار عنصر clear شده و در چه جهتی float شود.

ویژگی float

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

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

  • left - عنصر در سمت چپ عنصر نگه دارنده خود float می‌شود
  • right - عنصر در سمت راست عنصر نگه دارنده خود float می‌شود
  • none - عنصر float نمی‌شود (تنها در جایی که در متن اتفاق رخ داده نمایش داده می‌شود) این امر پیش‌فرض است
  • inherit - عنصر مقدار ویژگی float را از عنصر والد به ارث می‌برد

ویژگی float را در ساده ترین حالت می‌توان برای قرار دادن متن در اطراف تصاویر استفاده کرد.

مثال - float: right;

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

مثال
img {
  float: right;
}


مثال - float: left;

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

مثال
img {
  float: left;
}


مثال - بدون float

در مثال زیر تصویر فقط در جایی که در متن رخ می‌دهد، نمایش داده می‌شود (float: none;):

مثال
img {
  float: none;
}



منابع آموزشی