Layout - ویژگی float و clear

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

ویژگی 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;
}


منابع آموزشی