اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <style> div { border: 3px solid #4CAF50; padding: 5px; text-align:left; } .img1 { float: right; } .img2 { float: right; } .clearfix { overflow: auto; } </style> </head> <body> <h2>بدون Clearfix</h2> <p>این تصویر به سمت راست شناور شده است. و همچنین این تصویر بلندتر از عنصری است که آن را دربر گرفته است؛ بنابراین در بیرون از عنصر دربردارنده ی خود سرریز(overflow) می شود:</p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> ابر و باد و مه و خورشید و فلک در کارند تا تو نانی به کف آری و به غفلت نخوری. </div> <h2 style="clear:right">با Clearfix</h2> <p>ما می توانیم این مشکل را با اضافه کردن یک clearfix (یعنی راه حل) یعنی دستور overflow:auto به عنصر دربردارنده حل کنیم:</p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> ابر و باد و مه و خورشید و فلک در کارند تا تو نانی به کف آری و به غفلت نخوری. </div> </body> </html>
