ویژگی float در زبان css و html-[جلسه دوم]

صفحه ارایی با استفاده از float

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

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

 

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

به همین دلیل بعدا مفاهیمی که هدف اصلی آنها صفحه آرایی بود معرفی شدند. مفاهیمی مثل Flexbox و Grid و Multi-Column. اما باید توجه داشته باشید که پشتیبانی مرورگرها در حال حاضر در مورد این روش ها در وضعیت جالبی نیست. اما در آینده نزدیک کاملا قابل استفاده هستند.

نکاتی که باید در مورد رفتار float بدانید 

چندین قانون در مورد float وجود دارد که نحوه رفتار این ویژگی را شرح می دهد:

1. زمانی که یک عنصر float می گیرد و به یک سمت شناور می شود, بیرونی ترین لبه عنصر نمی تواند از عنصر نگهدارنده اش خارج شود. (اگر عنصر margin داشته باشد, margin بیرونی ترین لبه محسوب می شود و اگر نباشد بعد از آن border منظور این قانون است)

همانطور که در تصویر بالا مشاهده می کنید عنصر دارای فاصله بیرونی 50 پیکسل از سمت چپ است (margin-left: 50px) اما آن فاصله در زمانی که عنصر به سمت چپ شناور شده است (float: left) همچنان در عنصر نگهدارنده اش حفظ شده و خارج نشده است. 

2. وقتی یک عنصر به سمتی شناور می شود باید تا جایی که امکان دارد به سمت منظور هول داده شود. مثلا اگر به سمت چپ شناور می شود باید تا جایی که می تواند به سمت چپ عنصر نگهدارنده اش تغییر مکان دهد. 

3. یک عنصر شناور تا جایی به سمت منظور هول داده می شود تا بیرونی ترین لبه آن, لبه عنصر نگدارنده اش یا لبه عنصر شناور دیگری را لمس کند. 

4. فاصله بیرونی سمت راست (margin-right) یک عنصری که به سمت چپ شناور شده است در سمت راست فاصله بیرونی سمت چپ یک عنصری که به سمت راست شناور شده است و در سمت راست عنصر نیز است, قرار نمی گیرد. برای سمت چپ هم این قاونون برقرا است. (منظور این قانون عدم تداخل فواصل بیرونی عناصر شناور است) 

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

6. اگر یک عنصر inline را شناور کنیم مهم نیست که مقدار display آن چه باشد, در هر صورت عنصر به نوع block تبدیل می شود. (البته به غیر از حالت(none)

7.عنصر ریشه (html) نمی تواند شناور شود.

8. عناصری که مقدار position آنها absolute یا fixed است نمی توانند شناور شوند.

9. عنصر شناور از flow صفحه خارج نمی شود, این یعنی حرکت آن بر عناصر همسایه آن تاثیر می گذارد.

10. علاوه بر نکات و قانون های گفته شده دانستن تاثیر عناصر شناور بر رفتار نگهدارنده شان یا همان عنصر پدرشان حائز اهمیت است:  

عناصر شناور تاثیری بر روی ارتفاع نگهدارنده شان نمی گذارند.

در حالت عادی عنصر ارتفاع محتوا یا فرزندانش را می گیرد (مگر اینکه ارتفاع (height) خاصی برای آن مشخص شود). اما اگر فرزندان آن شناور (float) باشند, این فرزندان تاثیری بر ارتفاع عنصر پدر نخواهند گذاشت.

از این وحشتناک تر اینکه عنصر شناور روی عناصر بعدی در نگهدارنده های دیگر هم قرار می گیرد و حتی بر روی محتوای آنها تاثیر می گذارد ( متن عنصر دوم به علت وجود عنصر صورتی رنگ که شناور است به جلو حرکت کرده است):

این اتفاق اکثر مواقع دیده نمی شود چون عناصر گاهی حاشیه یا رنگ خاصی ندارند تا طراح متوجه این اتفاق باشد. در نتیجه با مشکلات عجیب و غریب صفحه آرایی روبرو خواهد شد.  

برای جلوگیری از این اتفاق باید عملیاتی را انجام دهید که به آن Clearing floats می گویند.چندین روش برای این کار وجود دارد که در ادامه معرفی شده اند و در نهایت بهترین و محبوب ترین روش معرفی می شود.

---

نویسنده: علیرضا برومند     تاریخ:سه شنبه ۱۸تیر۱۳۹۸

---