مالکیت شناور (float)
قبل از توضیح چیدمان با مالکیت شناور یا float می خواهیم در مورد نوع نمایش عناصر html مطلب مهمی را بررسی نماییم. عناصر در html به اشکال زیادی قابل نمایش می باشند که برای تغییر نوع نمایش آن ها می توان از ویژگی یا خصوصیت display استفاده می کنیم. خصوصیت display مقادیر زیاد و متفاوتی را گرفته و سبک نمایش عناصر را تغییر می دهد.
آنچه در این مقاله می خوانید ...در اینجا سه مقدار ویژگی display را مورد بررسی قرار میدیم :
عناصر با نوع نمایش block : عناصر بلاک هر کدام یک خط برای خود صرف نظر از محتوایشان در نظر می گیرند.
عناصر inline : این عناصر درون یک خط در ادامه یکدیگر قرار گرفته و به اندازه محتوای خود فضا اشغال می کنند.
عناصر inline-block : عناصری با تمام خصوصیات عناصر بلاک با این تفاوت که فضای اشغالی آن ها به اندازه محتوایشان می باشد.
حال که یک تصویر کوچکی از نوع نمایش عناصر دارید وقت آن رسیده که با ویژگی float آشنا شوید.
مالکیت شناور float :
ویژگی float باعث می شود تا عناصر به سمت چپ یا راست عنصر نگهدارنده شان شناور شده و یا به عبارت دیگر هول داده شوند. مالکیت شناور به شما این امکان را می دهد که چند عنصر block را در یک خط قرار دهید، برای این کار کافیست :
1. عرض آن ها را طوری قرار دهید که مجموع آن ها در یک خط قرار بگیرد.
2. سپس صفت float را برای آن ها با left یا right مقدار دهی کنید.
پس از انجام دو مورد فوق مشاهده می کنید که عناصر بلاک که قرار بود هر کدام یک خط را اشغال کنند حال کنار یکدیگر قرار گرفته اند. همه عناصر به صورت پیش فرض دارای خصوصیت float:none هستند. همچنین عناصر html به صورت پیش فرض دارای یک نوع نمایش می باشند که اکثرا inline یا block می باشند. به طور مثال چند نمونه از عناصر بلاک عبارتند از : div , p , figure , … حال برای چیدمان عناصر html کافیست ابتدا آنها را بلاک نموده و با ویژگی float کنار یکدیگر قرارشان دهید.
در زیر شما می بینید که عناصر در کنار یکدیگر قرار می گیرند با اینکه آنها block هستند:
در زیر دو حالت را برای عناصر block در نظر گرفته ایم :
حالت اول در صورتی که دارای خاصیت float نیستند.
حالت دوم در صورتی که دارای خاصیت float هستند.
نتایج را مشاهده می کنید:
html
<div style=”width:25%”></div>
<div style=”width:35%”></div>
<div style=”width:40%”></div>
style:
none float
div{height:20px}
left float
div{height:20px;float:left}
توجه خصوصیت float با خصوصیت position absolute تفاوت دارد . یک عنصر با خصوصیت absolute از جریان چیدمان صفحه جدا خواهد شد . در صورتی که در خاصیت float عنصر از جریان صفحه پیروی خواهد کرد و با توجه به چیدمان اطراف خود تغییر موقعیت خواهد داد. پس عناصری که مقدار position آنها absolute یا fixed است نمی توانند شناور شوند.
توجه اگر عنصری به صورت پیش فرض inline باشد زمانی که float روی آن اعمال می شود تبدیل به عنصر block می شود. همینطور عنصری با display از نوع inline-table به حالت table تغییر پیدا می کند.
تاثیر عناصر شناور بر رفتار نگهدارنده شان
عناصر شناور تاثیری بر روی ارتفاع نگهدارنده شان نمی گذارند! در حالت عادی ارتفاع عناصر نگهدارنده برابر با ارتفاع محتوا یا ارتفاع فرزندانشان می باشد (مگر اینکه ارتفاع (height) خاصی برای آن مشخص شود). اما اگر فرزندان آن شناور (float) باشند, این فرزندان تاثیری بر ارتفاع عنصر پدر نخواهند گذاشت. یعنی اگر ارتفاع عنصر شناور از ارتفاع دیگر عناصر داخل نگهدارنده بیشتر باشد و عنصر پدر دارای ارتفاع نباشد عنصر شناور از نگهدارنده خود بیرون می رود.
برای حل این مشکل دو راه حل وجود دارد، راه اول دادن ارتفاع به عنصر نگهدارنده به صورتی که بیشتر از ارتفاع عنصر شناور فرزندش باشد و راه دوم استفاده از ویژگی clear که در این حالت کافیست در انتهای عناصر نگهدارنده که دارای عناصر شناور هستند عنصری بلاک و با ویژگی clear:both استفاده کنید.
توجه توصیه می کنیم برای استفاده از ویژگی clear آن را به خوبی مطالعه نمایید.
توجه عنصر ریشه (html) نمی تواند شناور شود. همچنین عناصر شناور از flow صفحه خارج نمی شود, این یعنی حرکت آنها بر عناصر همسایه شان تاثیر گذار است.
1398/04/02
2710 بار
I’m not sure exactly why but this website is loading very slow for me.
Is anyone else having this issue or is it a issue
on my end? I’ll check back later and see if the problem still exists.