اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <style> .div1 { float: left; padding: 10px; border: 3px solid #73AD21; } .div2 { padding: 10px; border: 3px solid red; } .div3 { float: left; padding: 10px; border: 3px solid #73AD21; } .div4 { padding: 10px; border: 3px solid red; clear: left; } </style> </head> <body> <h2>بدون clear</h2> <div class="div1">div1</div> <div class="div2">div2 - توجه کنید که div2 در کدهای HTML پس از div1 قرار دارد. اما چونکه div1 در سمت چپ شناور(float) است، متن درون div2 در اطراف div1 قرار می گیرد. </div> <br><br> <h2>با clear</h2> <div class="div3">div3</div> <div class="div4">div4 - در اینجا دستور clear:left باعث می شود div4 در زیر div3 که شناور است قرار گیرد. ما همچنین می توانیم از clear:right یا clear:both نیز استفاده کنیم.</div> </body> </html>
