مشاهده و تمرین روی کد ها

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
    float: right;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2 {
    border: 1px solid red;
}


.div3 {
    float: right;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div4 {
    border: 1px solid red;
    clear: right;
}

h2,div {direction:rtl;}
</style>
</head>
<body>

<h2>بدون clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - توجه کنید که div2 در کد های html بعد از div1 قرار دارد. در هر حال چون div1 به سمت راست شناور شده است ، نتیجه این می شود که متن داخل div2 به دور div1 شناور می شود و div2 همه چیز را احاطه می کند.</div>

<h2>با استفاده از clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - استفاده از صفت clear باعث می شود div4 به زیر  div3 کشیده شود. مقدار "right" عناصری را که به سمت راست شناور شده اند پاکسازی می کند. همچنین می توان مقدار left  و both هم به صفت clear  داد.</div>

</body>
</html>