آموزش CSS

آموزش CSS - شناور شدن با Float

خصوصیت شناور شدن در زبان برنامه نویسی CSS، ویژگی است که نشان می دهد صفحه بهتر است شناور باشد یا ثابت قرار گیرد.

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

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

مقدار توصیف
Left عنصری که در طرف چپ آن قرار دارد مسدود می شود
Right عنصری که در طرف راست آن قرار دارد مسدود می شود
none  پاک کردن خاصیت شناور شدن از عنصر

چگونگی شناور شدن عناصر:

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

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

img {
    float: left;
}

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

.thumbnail {
    float: left;
    width: 125px;
    height: 125px;
    margin: 10px;
}

خاموش کردن شناور شدن و استفاده از خصوصیت پاک کردن

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

.clear {
    clear: left;
}

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

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...