سبد (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

دیدگاه‌ها  

+4 # raghb 1393-12-14 22:24
خسته نباشید
در مثال دوم (_float کردن عناصر، یکی بعد از دیگری_) در استایل آن شما طول عرض و حاشیه دادید:.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
ودرتگ ایمیج دوباره بصورت درون خطی برای ایمیج طول وعرض دادید:<img class="thumbnai l" src="/klematis_s mall.jpg" width="110" height="90"> چرا با وجود درون خطی بودن آن _ اندازه های استایل بر آن برتری پیدا می کند یعنی هر چه درون تگ ایمیج را اندازه ها را دستکاری میکنیم اتفاقی نمی افته!!
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # امیر پهلوان صادق 1393-12-16 10:15
سلام
توجه داشته باشید دو ویژگی تنظیم شده در تگ img یعنی width و height جزو خصوصیت های CSS نیستند. در واقع اینها جزو ویژگی های تگ img محسوب می شوند.
بنابراین width و height تنظیم شده در img جزو استایل های درون تگی نیستند و نمی توانیم بگوییم اولویت با آنهاست...! در واقع در اینجا اولویت با خصوصیت های تنظیم شده در کلاس thumbnail است.
اما سوالی که ممکن است مطرح شود، این است که چرا ویژگی های width و height را در تگ img تنظیم کرده ایم...!؟ از نظر google انجام این کار یک نمره مثبت محسوب می شود و البته مهمتر از آن این است که قبل از لود شدن کامل تصویر، محل تصویر رزرو شده باقی می ماند. یعنی اگر ویژگی های width و height تنظیم نشود، در ابتدا محلی به عکس اختصاص داده نمی شود و بعد از اینکه تصویر لود شد، یک مرتبه صفحه برای باز شدن محل تصویر بین متن ها، جهش می کند...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مانی 1393-11-23 12:37
سلام و خسته نباشید
کاربرد کد a:hover {background-color:blue;}
li {display:inline;}
در مثال ساخت یک منوی افقی چیه؟
www.beyamooz.com/try_it_yourself/tryit.php?filename=trycss_float5
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-11-23 14:54
سلام
خط 1: زمانی که موس روی لینک ها قرار گرفت، رنگ پس زمینه "آبی" می شود.
خط 2: باعث می شود تا li ها پشت سر هم قرار بگیرند. همان طور که می دانید، تگ li بصورت پیش فرض block است، یعنی تمام طول یک سطر را اشغال می کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مانی 1393-11-25 09:28
ولی وقتی li روبه همون حالت block برمی گردونم لیست تغییری نمیکنه!چرا؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-11-25 10:43
بله حق با شماست و این اتفاق به خاطر قسمت قرمز رنگ در 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 اعمال خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

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

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

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