clear properties in block-level element used to clear the floating effect which value may be set to:
clear: both left and right sides of the clear float
clear: left clear on the left float
clear: right to clear the right float
clear: there are none left floating effect
The difference is that different float, clear float before removal effect provided regenerate effect values provided in the new line
Demo code:
<style>
body{
width: 500px;
height: 400px;
border: 1px solid #000;
}
.div1 {
width: 100px;
height: 100px;
background-color: rgb(0, 255, 255);
text-align: center;
line-height: 100px;
margin: 10px 10px;
float: left;
}
.div2 {
width: 100px;
height: 100px;
line-height: 100px;
background-color: rgb(10, 200, 255);
text-align: center;
margin: 10px;
float: left;
}
.div3 {
width: 100px;
height: 100px;
line-height: 100px;
background-color: rgb(90, 0, 255);
text-align: center;
margin: auto 10px;
clear: left;
float: right;
}
.div4 {
width: 100px;
height: 100px;
line-height: 100px;
background-color: rgb(0, 0, 255);
text-align: center;
margin: auto 10px;
clear: right;
float: left;
}
</style>
<body>
<div class="div1">A</div>
<div class="div2">B</div>
<div class="div3">C</div>
<div class="div4">D</div>
</body>
result:
