آموزش شناوری در css به زبان ساده

رتبه: 0 ار 0 رای sssss
شناوری در css
نویسنده: تیم تولید محتوا زمان مطالعه 2 دقیقه

ویژگی float در css تعیین می کند که یک جعبه باید شناور باشد یا نه.

عناصر شناور با CSS

می توانید عناصر را در سمت چپ یا راست شناور کنید، اما فقط روی عناصری اعمال می شود که برای جعبه های آن ها، مقدار ویژگی موقعیت absolute نیستند. هر عنصری که از پس از عنصر شناور می آید، در طرف دیگر عنصر شناور قرار می گیرند.

ویژگی float ممکن است یکی از سه مقدار زیر را داشته باشد:

توضیحات مقدار
عنصر در سمت چپ بلوک خودش شناور می شود. left
عنصر در سمت راست بلوک خودش شناور می شود. right
خاصیت شناور را از یک عنصر حذف می کند. none

عناصر چگونه شناور می شوند؟

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

سایر عناصر به صورت نرمال در اطراف عناصر شناور جریان می یابند، مگر اینکه با استفاده از ویژگیclear  از آن جلوگیری شود. عناصر به صورت افقی شناور می شوند، به این معنی که یک عنصر فقط می تواند به صورت چپ یا راست شناور شود، نه بالا یا پایین.

مثال

img {

float: left;

}

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

مثال

.thumbnail {

float: left;

width: 125px;

height: 125px;

margin: 10px;

}

حذف خاصیت شناور با استفاده از ویژگی Clear

عناصری که بعد از عنصر شناور می آیند، در کنار آن قرار می گیرند. ویژگی Clear مشخص می کند که کدام سمت از جعبه عنصر دیگر عناصر شناور، مجاز به شناور شدن نیستند.

مثال

.clear {

clear: left;

}

توجه: این ویژگی می تواند یک عنصر را فقط از جعبه های شناور در همان بلوک پاک کند. این ویژگی عنصر را از جعبه های فرزند شناور درون خود عنصر پاک نمی کند.

برچسب : سی اس اس
profile name
تیم تولید محتوا

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

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه

دیدگاهتان را بنویسید

1 2 3 4 5

0 نظر درباره «آموزش شناوری در css به زبان ساده»

    هنوز نظری برای این بخش ثبت نشده است
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید