درس دهم

خصوصیت float کمک می‌کند که بتوان یک عنصر را در صفحه به سمت چپ یا راست فشار داده و موجب می شود تا دیگر عناصر اطراف آن پوشیده شوند.‌


معمولاً از شناور کردن برای تصاویر استفاده می کنند. ولی برای طرح بندی نیز این خاصیت مفید خواهد بود.‌

چگونگی شناور کردن یک عنصر

Float کردن عناصر را فقط می توان در جهت محور x به سمت چپ یا راست انجام داد.
عناصری که پس از عنصر Float می‌آیند، اطراف آن را می ‌پوشانند.
عناصری که پیش از عنصرFloat شده آمده اند، تاثیری نخواهد داشت.
در صورتی که یک عکس به سمت راست فشرده شود، متن زیر آن سمت چپ آن را خواهد پوشاند.
به مثال زیر توجه کنید:

img
{
float:right;
}

float کردن عناصر یکی پس از دیگری

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

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

خصوصیت clear

در css عناصری که پس از یک عنصر Float شده قرار گرفته باشند، اطراف آن را می گیرند.‌برای پرهیز از این مسئله می توان از خصوصیات clear استفاده کرد.
به مثال زیر توجه کنید یک متن به گالری تصاویر اضافه شده و خصوصیت clear تنظیم شده است.
به مثال زیر توجه کنید:

.text_line
{
clear:both;
}

float:right شناور کردن یک عکس به سمت راست یک پاراگراف
تنظیم خصوصیت برای یک عکس و قرار دادن آن داخل یک پاراگراف: اضافه کردن border و margin به عکس مورد نظر

ساخت یک منوی افقی

برای ساخت منوی افقی خصوصیت float همراه با لیستی از hyperlinkها استفاده می شود.
خصوصیات مربوط به float در CSS
شماره مربوط به css نشان دهنده این است که خصوصیت مربوطه در کدام یک از نسخه های css تعریف شده است.
clear : تعیین می کند که در اطراف یک عنصر، عناصر دیگری که float شده است می توانند قرار گیرند یا خیر.
مقادیر آن به صورت زیر می باشد:

left
right
both
none
inherit css:1

float : مشخص کننده شناور بودن یا نبودن یک Box است.
مقادیر آن به صورت زیر می باشد:

left
right.
none
inherit

css:1

1000 کاراکتر باقیمانده است