بروز رسانی بهمن ۱ام, ۱۳۹۹ ۳:۳۴ بعد از ظهر
اردیبهشت ۰۶, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
ویژگی float
از آن هم دسته از ویژگی هایی می باشد که مکان عنصر را مشخص می کند. آن ویژگی باعث می می شود تا عنصر به سمت چپ یا راست عنصر نگهدارنده اش هول داده می شود.
آن ویژگی می تواند مقادیر زیر را داشته باشد:
float: right;
float: left;
float: none; /* مقدار پیشفرض */
float: inherit;
زمانی که یک عنصر به سمت راست هول داده می می شود (float: right
) محتوای بعد از آن هم دور لبه چپ عنصر پیچیده می شوند. و همچنین زمانی که عنصر به سمت چپ هول داده می شود (float: left
) محتوای بعد از آن هم دور لبه راست عنصر جمع می می شود.
در مثال زیر عنصر تصویر در حالت پیشفرض (none
) قرار دارد و همچنین متن بصورت عادی بعد از تصویر قرار گرفته می باشد:
با آن هم شرایط به تصویر ویژگی float
با مقدار right
را می دهیم:
ویژگی float
کارایی بالایی در طراحی صفحات وب دارد. مثلا فرض کنید گالری از تصاویر دارید که هر تصویر یک متن توضیح نیز دارد. html آن هم بصورت زیر خواهد بود:
<div class="gallery-container">
<figure>
<img src="my-image.png" alt="Alt text">
<figcaption>
image caption
</figcaption>
</figure>
<figure>
<img src="my-image.png" alt="Alt text">
<figcaption>
image caption
</figcaption>
</figure>
<figure>
<img src="my-image.png" alt="Alt text">
<figcaption>
image caption
</figcaption>
</figure>
</div>
زیرا و به درستی که عنصر <figure>
از نوع عناصر بلاک می باشد پس اجازه نمی دهد تا عناصر بعد از آن هم در کنار آن هم قرار بگیرند و همچنین همچنین آن عنصر کل فضای افقی محیط خود را اشغال می کند:
حتی در صورتی که به هر یک از عناصر عرض مشخص بدهیم باز هم اجازه نمی دهند تا عنصر بعدی در کنار آنها قرار بگیرد:
کافی می باشد تا به آن عناصر float
داده می شود:
figure
float: left;
margin: 10px;
زمانی که یک عنصر بلاک به یک سمت float
یا آن هم شناور می می شود عرض آن هم عنصر به حداقل ممکن یعنی عرض محتوای داخل آن هم می رسد.
در مثال بعد از شناور کردن عناصر به سمت چپ عرض عناصر به مقدار و اندازه تصویر و همچنین متن داخلشان کاهش پیدا کرد.
float
قبل از آنکه ویژگی float
معرفی می شود, طراحان با بهره بری و استفاده از عنصر table
و همچنین اجزا آن هم عناصر صفحه را در کنار هم می چیدند یا به اصطلاح صفحه آرایی می کردند. که کار جالبی نبود چرا که عنصر table
جهت ساخت جدول می باشد نه صفحه آرایی.
در پس نتیجه آن می شود که با وارد شدن float
به دنیای وب جایگزین خوبی جهت روش قبلی صفحه آرایی شد. کافی می باشد به عناصر بلاک که نقش نگهدارنده های اصلی صفحه را دارند float
داده می شود تا بتوانیم ستون های متنوع و گوناگون و مختلف جهت محتوای صفحه را بسازیم.
در واقع ویژگی float
نیز جهت صفحه آرایی معرفی نشده می باشد بلکه همانطور که اول مطلب گفته شد کار اصلی آن هم آن می باشد که محتوای بعد از آن هم دور عنصر جمع می شود. یعنی آن هم نوعی حالت که در مجلات و همچنین روزنامه ها وجود دارد:
به همین دلیل بعدا مفاهیم که هدف اصلی آنها صفحه آرایی بود معرفی شدند. مفاهیمی مثل Flexbox و همچنین Grid و همچنین Multi-Column. ولی باید توجه داشت بایستی و حتما توجه داشته باشید که پشتیبانی مرورگرها در حال حاضر در مورد آن روش ها در اوضاع جالبی نیست. ولی باید توجه داشت در بعدی نزدیک کاملا قابل بهره بری و استفاده خواهند بود.
ویژگی float
در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, آندروید و همچنین iOS پشتیبانی می می شود.
بهمن ۰۱, ۱۳۹۹ 0
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0