با سلام خدمت شما کاربران محترم وبسایت ilikephp.ir . من علیرضا حاتمی نیا هستم و با آموزشی دیگر از آموزش های طراحی وب در خدمت شما هستم.
در این آموزش با خصوصیت معروفی به نام float در CSS آشنا می شویم.
خصوصیت float :
اگر تا به حال به مقالات یک روزنامه یا مجله دقت کرده باشید، شیوه چیدمان یک مقاله مانند تصویر زیر به این صورت است که تصاویر در جهت های مختلف (چپ و راست) چیده شده اند و محتوا قبل یا بعد از آنها به دور آنها جمع شده اند.
عبارت float به معنی شناور است و در صفحه وب برای عناصری به کار می رود که قرار است به سمت چپ یا راست شناور شوند و عناصر بعد از آن به دور لبه آن جمع شوند.
خصویت float دارای 4 مقدار می باشد :
- none : مقدار پیشفرض همه عناصر می باشد که خصوصیت float را غیرفعال می کند.
- right : عنصر مورد نظر را به سمت راست شناور می کند.
- left : عنصر مورد نظر را به سمت چپ شناور می کند.
- inherit : این مقدار تعیین می کند که باید مقدار خصوصیت float والد خود را به ارث ببرد.
float: none; float: right; float: left; float: inherit;
مثال:
در مثال زیر تصویر و پاراگرافی را در نظر می گیریم که مقدار float برای تصویر در حالت پیشفرض none است و یعنی هیچ مقداری برای آن در نظر گرفته نشده است.
مقدار float برای تصویر را برابر left قرار می دهیم تا به سمت چپ شناور شود
img { float: left; }
