صفت float در CSS
یادگیری CSSصفت float تعیین کننده شناور بودن یا نبودن عناصر است.
از صفت clear برای کنترل عملکرد شناور بودن عناصر استفاده می شود.
ساده ترین استفاده از صفت float برای قرار دادن متن در اطراف تصویر است. در مثال زیر چگونگی شناور شدن و انتقال تصویر به سمت راست متن ، نمایش داده شده است.
مثال:
- صفت float
مشاهده مثالimg { float: right; margin: 0 0 10px 10px; }
صفت clear
از این صفت برای کنترل عملکرد عناصر شناور ، استفاده می شود. عناصری هم که بعد از یک عنصر شناور قرار دارند ، در اطراف آن عنصر شناور می شوند. برای جلوگیری از این حالت از صفت clear استفاده می شود.
این صفت تعیین می کند که عناصر دیگر در کدام سمت از عنصر مورد نظر شناور نشوند.
مثال :
- صفت clear
مشاهده مثالdiv { clear: left; }
هک clearfix
اگر عنصری از عنصر نگه دارنده آن بزرگتر، بلندتر یا طولانی تر بوده و شناور باشد ، از عنصر نگه دارنده خود بیرون خواهد زد. برای حل این مشکل می توان به عنصر نگهدارنده ;overflow: auto را اضافه کرد.
مثال :
- کلاس clearfix
مشاهده مثال.clearfix { overflow: auto; }
تا زمانی که به margin و padding های مورد استفاده در قالب خود کنترل دارید می توانید از مورد بالا استفاده کنید ، اما می توانید جهت اطمینان بیشتر از هک جدید clearfix::after استفاده کنید که در حال حاضر در اکثر وب سایت ها مورد استفاده است ، زیرا از نظر نتیجه ای که ایجاد می کند ، مطمئن تر است.
- مثال :
- clearfix after
مشاهده مثال.clearfix::after { content: ""; clear: both; display: table; }
نمونه قالب بندی وب
استفاده از صفت float برای کل قالب بندی صفحه وب ، متداول است.
مثال :
-
- نمونه ای از قالب بندی یک صفحه وب
مشاهده مثال.header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; }
نظر شما
>