Layout - ویژگی float و clear

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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;
}

مشاهدهٔ نتیجه

صفحهٔ بعد»

«صفحهٔ قبل