چیدمان عناصر توسط float در CSS

علیرضا حاتمی نیا 1395/10/18 72

چیدمان عناصر توسط float در CSS

با سلام خدمت شما کاربران محترم وبسایت ilikephp.ir . من علیرضا حاتمی نیا هستم و با آموزشی دیگر از آموزش های  طراحی وب در خدمت شما هستم.
در این آموزش با خصوصیت معروفی به نام float در CSS آشنا می شویم.

خصوصیت float :

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


 

خصوصیت float در CSS


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

خصویت float دارای 4 مقدار می باشد :

  • none : مقدار پیشفرض همه عناصر می باشد که خصوصیت float را غیرفعال می کند.
  • right : عنصر مورد نظر را به سمت راست شناور می کند.
  • left : عنصر مورد نظر را به سمت چپ شناور می کند.
  • inherit : این مقدار تعیین می کند که باید مقدار خصوصیت float والد خود را به ارث ببرد.
float: none;
float: right;
float: left;
float: inherit;

مثال:
در مثال زیر تصویر و پاراگرافی را در نظر می گیریم که مقدار float برای تصویر در حالت پیشفرض none است و یعنی هیچ مقداری برای آن در نظر گرفته نشده است.


 

خصوصیت float در CSS


مقدار float  برای تصویر را برابر left قرار می دهیم تا به سمت چپ شناور شود

img {
float: left;
}


 

خصوصیت float در CSS

دانلود PDF قسمت نوزدهم آموزش طراحی وب
 

قسمت بعدی قسمت قبلی