خاصیت 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 |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 33716
دیدگاه‌ها
خسته نباشید
در مثال دوم (_float کردن عناصر، یکی بعد از دیگری_) در استایل آن شما طول عرض و حاشیه دادید:.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}ودرتگ ایمیج دوباره بصورت درون خطی برای ایمیج طول وعرض دادید:<img class="thumbnai l" src="/klematis_s mall.jpg" width="110" height="90"> چرا با وجود درون خطی بودن آن _ اندازه های استایل بر آن برتری پیدا می کند یعنی هر چه درون تگ ایمیج را اندازه ها را دستکاری میکنیم اتفاقی نمی افته!!
ممنون
سلام
توجه داشته باشید دو ویژگی تنظیم شده در تگ img یعنی width و height جزو خصوصیت های CSS نیستند. در واقع اینها جزو ویژگی های تگ img محسوب می شوند.
بنابراین width و height تنظیم شده در img جزو استایل های درون تگی نیستند و نمی توانیم بگوییم اولویت با آنهاست...! در واقع در اینجا اولویت با خصوصیت های تنظیم شده در کلاس thumbnail است.
اما سوالی که ممکن است مطرح شود، این است که چرا ویژگی های width و height را در تگ img تنظیم کرده ایم...!؟ از نظر google انجام این کار یک نمره مثبت محسوب می شود و البته مهمتر از آن این است که قبل از لود شدن کامل تصویر، محل تصویر رزرو شده باقی می ماند. یعنی اگر ویژگی های width و height تنظیم نشود، در ابتدا محلی به عکس اختصاص داده نمی شود و بعد از اینکه تصویر لود شد، یک مرتبه صفحه برای باز شدن محل تصویر بین متن ها، جهش می کند...!
سلام و خسته نباشید
کاربرد کد a:hover {background-color:blue;}
li {display:inline;}در مثال ساخت یک منوی افقی چیه؟
www.beyamooz.com/try_it_yourself/tryit.php?filename=trycss_float5
سلام
خط 1: زمانی که موس روی لینک ها قرار گرفت، رنگ پس زمینه "آبی" می شود.
خط 2: باعث می شود تا li ها پشت سر هم قرار بگیرند. همان طور که می دانید، تگ li بصورت پیش فرض block است، یعنی تمام طول یک سطر را اشغال می کند.
ولی وقتی li روبه همون حالت block برمی گردونم لیست تغییری نمیکنه!چرا؟
بله حق با شماست و این اتفاق به خاطر قسمت قرمز رنگ در Selector زیر است:a{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
در واقع قصد ما این بوده که برای لینک ها خصوصیت width را تنظیم کنیم، اما همان طور که می دانید تگ a یک عنصر inline است و تنظیم عرض برای یک عنصر inline بی معنی است. اما اگر خصوصیت float را برای آن تنظیم کنیم، آن موقع خصوصیت width اعمال خواهد شد.