شما اینجا هستید

ویژگی float مشخص میکند که یک عنصر باید شناور شود یا خیر و ویژگی clear برای کنترل رفتار عناصر شناور به کار گرفته میشود.

ویژگی flaot

فراگیرترین استفاده از ویژگی float، نمایش متن در کنار تصویر است. ویژگی float دارای مقادیر right, left و none است.

مثال پایین یک تصویر که در سمت راست یک متن شناور شده است را نمایش میدهد:

<html>

<head>

<style>

img {

    float: right;

    margin: 0 0 10px 10px;

}

</style>

</head>

<body>


<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>


<p><img src="puyapardaz.jpg" alt="puyapardaz.ir" width="100" height="140">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>


</body>

</html>

ویژگی clear

 

ویژگی clear برای کنترل رفتار عناصر شناور به کار میرود. عناصری که بعد از عنصر شناور هستند در اطراف عنصر شناور نمایش داده میشوند. برای جلوگیری از این وضعیت از ویژگی clear استفاده میکنیم. ویژگی clear دارای مقادیر both, left, right و none میباشد.

ویژگی clear مشخص میکند که کدام طرف از عناصر شناور اجازه شناور بودن را نداشته باشند:

<html>

<head>

<style>

.div1 {

    float: left;

    width: 100px;

    height: 50px;

    margin: 10px;

    border: 3px solid #8AC007;

}


.div2 {

    border: 1px solid red;

}



.div3 {

    float: left;

    width: 100px;

    height: 50px;

    margin: 10px;

    border: 3px solid #8AC007;

}


.div4 {

    border: 1px solid red;

    clear: left;

}

</style>

</head>

<body>


<h2>Without clear</h2>

<div class="div1">div1</div>

<div class="div2">div2 - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.</div>


<h2>Using clear</h2>

<div class="div3">div3</div>

<div class="div4">div4 - Using clear moves div4 down below the floated div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>


</body>

</html>

 

هک سرریز – ;overflow: auto

 

اگر یک عنصر بزرگتر از عنصر نگهدارنده اش باشد و همچنین شناور باشد از کادر عنصر نگدارنده اش بیرون میزند به این حالت سرریز شدن میگویند که آن را میتوانیم توسط ویژگی overflow کنترل کنیم. برای اینکار ;overflow: auto را به عنصر نگهدارنده اضافه میکنیم تا مشکل سرریز شدن برطرف شود:

<html>

<head>

<style>

div {

    border: 3px solid #8AC007;

}


.img1 {

    float: right;

}


.clearfix {

    overflow: auto;

}


.img2 {

    float: right;

}

</style>

</head>

<body>


<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>


<div><img class="img1" src="puyapardaz.jpg" alt="puyapardaz.ir" width="100" height="140">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>


<p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this problem:</p>


<div class="clearfix"><img class="img2" src="puyapardaz.jpg" alt="puyapardaz.ir" width="100" height="140">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>


</body>

</html>

 

ویژگی overflow دارای مقادیر visible, hidden, auto و scroll میباشد.

 

نمونه از صفحه آرایی وب

تقریباً در همه صفحه آرایی ها در وب از ویژگی float استفاده میشود:

<html>

<head>

<style>

div {

    border: 3px solid blue;

}


.clearfix {

    overflow: auto;

}


nav {

    float: left;

    width: 200px;

    border: 3px solid #8AC007;

}


section {

    margin-left: 206px;

    border: 3px solid red;

}

</style>

</head>

<body>


<div class="clearfix">


<nav>

  <span>nav</span>

    <ul>

      <li><a target="_blank" href="puyapardaz.ir ">Home</a></li>

      <li><a target="_blank" href=" puyapardaz.ir ">CSS</a></li>

      <li><a target="_blank" href=" puyapardaz.ir ">HTML</a></li>

      <li><a target="_blank" href=" puyapardaz.ir ">JavaScript</a></li>

    </ul>

  </nav>


  <section>

    <span>section</span>

    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>

  </section>


  <section>

    <span>section</span>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>

  </section>


</div>


</body>

</html>

 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.