سبد (0)

خاصیت float در CSS

خاصیت Float در CSS

Wiki



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

شناور کردن (float) اغلب برای تصاویر استفاده می شود، اما برای کار کردن با layoutها نیز مفید است.(طرح بندی)


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

Wiki

عناصر فقط در جهت محور X می توانند Float شوند(چپ یا راست).

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

عناصری که قبل از عنصر float شده آمده است، تأثیری ندارند.

اگر یک عکس به سمت راست فشار داده شود، متن زیر آن، سمت چپ آنرا خواهد گرفت:

مثال (خاصیت float در CSS)

img
{
float:right;
}
خودتان امتحان کنید »

float کردن عناصر، یکی بعد از دیگری

Wiki

اگر چندین عنصر float شده را بعد از یکدیگر قرار دهید، در صورت وجود فضای کافی، در نهایت یکی بعد از دیگری قرار خواهد گرفت.

در مثال زیر با استفاده از خصوصیت float یک گالری تصاویر ساخته ایم:

مثال (خاصیت float در CSS)

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
خودتان امتحان کنید »

استفاده از خصوصیت clear

Wiki

عناصری که بعد از یک عنصر float شده قرار دارند، اطراف آنرا خواهند گرفت. برای اجتناب از این موضوع از خصوصیت clear استفاده کنید.

در مثال زیر یک متن به گالری تصاویر اضافه شده است و خصوصیت clear را برای آن تنظیم کرده ایم:

مثال (خاصیت float در CSS)

.text_line
{
clear:both;
}
خودتان امتحان کنید »

مثال

مثال - خودتان امتحان کنید

Wiki

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

float کردن یک عکس همراه با عنوان آن به سمت راست
قرار دادن یک عکس با یک عنوان داخل تگ <div> و فشار داده آن به سمت راست

style دادن به حرف اول یک پاراگراف و float کردن آن به سمت چپ
قرار دادن حرف اول یک پاراگراف درون تگ <span> و فشار دادن آن به سمت چپ، و style دادن به تگ مورد نظر

ساخت یک منوی افقی
استفاده از خصوصیت float همراه با لیستی از hyperlinkها برای ساخت یک منوی افقی

ساخت یک homepage بدون استفاده از جدول
استفاده از float برای ساخت یک homepage با یک header و footer و قسمت سمت چپ و همچنین قسمت اصلی


کلیه خصوصیات مربوط به float در CSS

Wiki

شماره ای که در ستون css ذکر شده، نشان می دهد که خصوصیت مورد نظر در کدام نسخه CSS تعریف شده است.

خصوصیتتوضیحاتمقادیرCSS
clear

مشخص می کند که اطراف یک عنصر، آیا عناصر دیگری که float شده اند قرار بگیرد یا نه

left
right
both
none
inherit
1
float

شناور بودن یا نبودن یک Box را مشخص می کند

left
right
none
inherit
1

آموزش صوتی CSS

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه