در این آموزش قصد داریم انتخابگر های float و clear که به هم مربوط می باشند را به شما آموزش بدهم. امید وارم بتونید به سادگی یاد بگیرید.
مثال
float چه کار می کند؟
float باعث میشه که یک متن ، تصویر یا هر شی دیگر به سمت راست یا چپ شی های هم سطح خود در صفحه برود.
تفاوت float با کد های اچ تی ام ال table
شاید بگید خوب این رو میشه با استفاده از table هم بوجود آورد ولی باید بگم که لود شدن کد های table در صفحه زمان بیشتری طول می کشه ولی خاصیت float زمان زیادی نیاز نداره.
توجه داشته باشین که float رو میشه چند بار تکرار کرد. که برای مثال اگر شما به تصویری خاصیت float سمت چپ رو بدید و بعد از اون تصویر دیگری رو با همین خاصیت بذارید این دو تصویر به ترتیب از چپ به راست در صفحه قرار خواهند گرفت. این خاصیت باعث شده که افراد زیادی از این خاصیت و کد های ul و li در 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 | نه سمت راست می رود و نه سمت چپ ؛ هیچ کاری انجام نمی دهد. |
 |
توجه داشته باشین که در جدول بالا گزینه ای به نام center وجود ندارد. متاسفانه مدت هاست مشاهده می کنم که بعضی ها از این گزینه در این خاصیت استفاده می کنند در حالی که چنین گزینه ای هیچ عملکردی ندارد و معمولا به این دلیل از این گزینه استفاده می کنند که هیچ کاری این گزینه انجام نمی دهد؛ شما بهتر است از گزینه های none و inherit استفاده کنید. |
clear در کار float دخالت می کند!
خاصیت clear به شما اجاره می دهد که در زمانی که می خواهید خاصیت float فقط تا آن جا عمل کند و بعد از تگی که در آن خاصیت clear استفاده شده است بتوان به صورت عادی به کد نویسی ادامه داد.
| گزينه | توضيحات |
|---|---|
| both | به معنی «هر دو» می باشد و خاصیت های float هر دو سمت را خنثی می کند. |
| right | خاصیت float سمت راست را خنثی می کند (float:right) |
| left | خاصیت float سمت چپ را خنثی می کند (float:left) |
| none | هیچ خاصیتی را خنثی نمی کند. |
| inherit | هیچ کاری انجام نمی دهد و مثل این می ماند که از این خاصیت استفاده نشده است. |
این خاصیت معمولا به دو صورت زیر در کد ها استفاده می شوند که البته برای سریع نوشتن کد و کم کردن حجم صفحه از کلاس ها که معمولا clear را انتخاب می کنند ولی شما می توانید هر چیز دیگری را نیز انتخاب کنید.
در صورتی که متوجه نمی شوید این خاصیت دقیقا چه چیز float را خنثی می کند به تصویر زیر دقت کنید:
منبع این آموزش فقط و فقط سایت کدستان می باشد و کپی برداری از آن غیر مجاز است.
