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

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

خصوصیت float :

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


چیدمان عناصر با float

 


عبارت 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 قسمت نوزدهم آموزش طراحی وب
 

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران