Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

آموزش float و clear در css

در این آموزش قصد داریم انتخابگر های float و clear که به هم مربوط می باشند را به شما آموزش بدهم. امید وارم بتونید به سادگی یاد بگیرید.

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

مثال


float چه کار می کند؟

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

آموزش خاصیت float در سی اس اس

تفاوت float با کد های اچ تی ام ال table

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

توجه داشته باشین که float رو میشه چند بار تکرار کرد. که برای مثال اگر شما به تصویری خاصیت float سمت چپ رو بدید و بعد از اون تصویر دیگری رو با همین خاصیت بذارید این دو تصویر به ترتیب از چپ به راست در صفحه قرار خواهند گرفت. این خاصیت باعث شده که افراد زیادی از این خاصیت و کد های ul و li در html استفاده کنند و افکت های باور نکردنیی به این ها بدهند. به مثال زیر توجه کنید:

<html>
    <
head>
        <
style>
            ul li{

                float: left;
               
margin-right: 10px;
            }
        </style>
    </
head>
    <
body>
        <
ul>
            <
li>some text , box and etc.</li>
            <
li>some text , box and etc.</li>
        </
ul>
    </
body>
</
html>

اگر عرض باکس اندازه صفحه یا بکس بزرگ تر از خود باشد چه اتفاقی می افتد؟

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

اما بدی این خاصیت هم این است که اگر شما این خاصیت رو بر روی right قرار دهید متن یا باکس یا تصویر یا ... زمانی که به سطر بعد می رود در سمت راست قرار می گیرد و این باعث می شود که زمانی که می خواهید گزینه ها در وسط قرار گیرند امکان پذیر نمی باشد.

در float از چه چیز هایی می توان استفاده کرد؟

به جدول زیر دقت کنید:

گزينه توضيحات
right متن ، باکس ، تصویر ، لینک و ... را به سمت راست منتقل می کند.
left متن ، باکس ، تصویر ، لینک و ... را به سمت چپ منتقل می کند.
inherit حالت عادی است و خاصیت را صلب می کند.
none نه سمت راست می رود و نه سمت چپ ؛ هیچ کاری انجام نمی دهد.


attention
توجه داشته باشین که در جدول بالا گزینه ای به نام center وجود ندارد.
متاسفانه مدت هاست مشاهده می کنم که بعضی ها از این گزینه در این خاصیت استفاده می کنند در حالی که چنین گزینه ای هیچ عملکردی ندارد و معمولا به این دلیل از این گزینه استفاده می کنند که هیچ کاری این گزینه انجام نمی دهد؛ شما بهتر است از گزینه های none و inherit استفاده کنید.

clear در کار float دخالت می کند!

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

گزينه توضيحات
both به معنی «هر دو» می باشد و خاصیت های float هر دو سمت را خنثی می کند.
right خاصیت float سمت راست را خنثی می کند (float:right)
left خاصیت float سمت چپ را خنثی می کند (float:left)
none هیچ خاصیتی را خنثی نمی کند.
inherit هیچ کاری انجام نمی دهد و مثل این می ماند که از این خاصیت استفاده نشده است.

این خاصیت معمولا به دو صورت زیر در کد ها استفاده می شوند که البته برای سریع نوشتن کد و کم کردن حجم صفحه از کلاس ها که معمولا clear را انتخاب می کنند ولی شما می توانید هر چیز دیگری را نیز انتخاب کنید.

<div style="clear: both;"></div>

<br style="clear: both;">

در صورتی که متوجه نمی شوید این خاصیت دقیقا چه چیز float را خنثی می کند به تصویر زیر دقت کنید:

آموزش clear در css



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

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی
کلاس های آنلاین فعال

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

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4408
تعداد اعضا : 36759
افراد آنلاین : 7
بازدید امروز : 3,238
بازدید دیروز : 841
گوگل امروز : 62
گوگل دیروز : 65
بازدید هفته : 10,406
بازدید ماه : 23,005
بازدید سال : 29,789
بازدید کلی : 10,811,491