آموزش float در css

CSS float Property

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

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

برای شروع به این مثال توجه کنید:

<div style="float:left;">
    Left float
</div>
<div style="float:right;">
    right float
</div>

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

مقدار ها در خاصیت float

در خاصیت float چهار مقدار (value) دارد. این چهار مقدار به این گونه است:

• right : این مقدار باعث می شود باکس (تگ) به سمت راست منتقل شود.
• left : این مقدار باعث می شود باکس (تگ) به سمت چپ منتقل شود.
• none : به هیچ طرف برده نمی شود و مانند این می ماند که خاصیت اصلا استفاده نشده است. (برای مثال می توانید در جاوا اسکریپت از آن استفاده کنید)
• inherit : خاصیت تگ مادر خود را به خود میگیرد (برای مثال اگر تگ مادر آن سمت راست باشد این تگ هم به سمت راست می رود.)

به مثال های زیر توجه کنید:

کاربرد ها و توضیحات دیگر

شما با استفاده از این خاصیت و همراه سازی آن با خاصیت clear می توانید بدون استفاده از تگ table یک جدول درست کنید و یا اولین حرف یک پاراگراف را مانند بسیاری از کتاب ها بزرگ تر از بقیه بنویسید و یا یک منوی CSS را بسازید و یا با استفاده از آن یک منوی کشویی CSS همراه با جاوا اسکریپت بسازید و یا بسیاری از کاربرد های دیگر که می توانید با ترکیب کردن کدهای CSS انجام بدید.