021-28423015

صفت float در CSS

صفت float تعیین کننده شناور بودن یا نبودن عناصر است.
از صفت clear برای کنترل عملکرد شناور بودن عناصر استفاده می شود.

ساده ترین استفاده از صفت float برای قرار دادن متن در اطراف تصویر است. در مثال زیر چگونگی شناور شدن و انتقال تصویر به سمت راست متن ، نمایش داده شده است.

مثال:

 

 

صفت clear

از این صفت برای کنترل عملکرد عناصر شناور ، استفاده می شود. عناصری هم که بعد از  یک عنصر شناور قرار دارند ، در اطراف آن عنصر شناور می شوند. برای جلوگیری از این حالت از صفت clear استفاده می شود.
این صفت تعیین می کند که عناصر دیگر در کدام سمت از عنصر مورد نظر شناور نشوند.

مثال :

هک  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%;
      }
      مشاهده مثال
    •  

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط