خاصیت float در CSS
خاصیت Float در CSS
با این خصوصیت می توان یک عنصر را در صفحه به سمت چپ یا راست فشار داد و اجازه داد تا دیگر عناصر اطراف آنرا بپوشانند.
شناور کردن (float) اغلب برای تصاویر استفاده می شود، اما برای کار کردن با layoutها نیز مفید است.(طرح بندی)
شناور کردن یک عنصر چگونه است
عناصر فقط در جهت محور X می توانند Float شوند(چپ یا راست).
عناصری که بعد از عنصر float شده آمده است، اطراف آنرا خواهند گرفت.
عناصری که قبل از عنصر float شده آمده است، تأثیری ندارند.
اگر یک عکس به سمت راست فشار داده شود، متن زیر آن، سمت چپ آنرا خواهد گرفت:
float کردن عناصر، یکی بعد از دیگری
اگر چندین عنصر float شده را بعد از یکدیگر قرار دهید، در صورت وجود فضای کافی، در نهایت یکی بعد از دیگری قرار خواهد گرفت.
در مثال زیر با استفاده از خصوصیت float یک گالری تصاویر ساخته ایم:
مثال (خاصیت float در CSS)
{
float:left;
width:110px;
height:90px;
margin:5px;
}
استفاده از خصوصیت clear
عناصری که بعد از یک عنصر float شده قرار دارند، اطراف آنرا خواهند گرفت. برای اجتناب از این موضوع از خصوصیت clear استفاده کنید.
در مثال زیر یک متن به گالری تصاویر اضافه شده است و خصوصیت clear را برای آن تنظیم کرده ایم:
مثال - خودتان امتحان کنید
float کردن یک عکس به سمت راست یک پاراگراف
تنظیم خصوصیت float:right برای یک عکس و قرار دادن آن داخل یک پاراگراف. اضافه کردن border و margin به عکس مورد نظر
float کردن یک عکس همراه با عنوان آن به سمت راست
قرار دادن یک عکس با یک عنوان داخل تگ <div> و فشار داده آن به سمت راست
style دادن به حرف اول یک پاراگراف و float کردن آن به سمت چپ
قرار دادن حرف اول یک پاراگراف درون تگ <span> و فشار دادن آن به سمت چپ، و style دادن به تگ مورد نظر
ساخت یک منوی افقی
استفاده از خصوصیت float همراه با لیستی از hyperlinkها برای ساخت یک منوی افقی
ساخت یک homepage بدون استفاده از جدول
استفاده از float برای ساخت یک homepage با یک header و footer و قسمت سمت چپ و همچنین قسمت اصلی
کلیه خصوصیات مربوط به float در CSS
شماره ای که در ستون css ذکر شده، نشان می دهد که خصوصیت مورد نظر در کدام نسخه CSS تعریف شده است.
خصوصیت | توضیحات | مقادیر | CSS |
---|---|---|---|
clear |
مشخص می کند که اطراف یک عنصر، آیا عناصر دیگری که float شده اند قرار بگیرد یا نه |
left right both none inherit |
1 |
float |
شناور بودن یا نبودن یک Box را مشخص می کند |
left right none inherit |
1 |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 32883