​x
 
<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
div {
    position:relative; display:block; float:left;
    width:10%; height:40px;
    top:0px; left:20%;
    margin:0px auto; padding:0px;
    border:3px ridge #ccc;
    background-color:yellow;
}
div+div {
    background-color:green;
}
div+div+div {
    background-color:blue;
}
div+div+div+div {
    background-color:red;
}
div+div+div+div+div {
    background-color:white;
}
.clear {
    clear:left;
}
p {
    clear:both;
    margin:5px; padding:10px;
}
</style>
</head>
​
<body>
​
<p>Five <i>&lt;div&gt;</i> boxes floated to left from one another ("<i>float:left</i>"):</p>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<p>Box #4 (red) is cleared from the floating ("<i>clear:left</i>"):</p>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div class="clear">&nbsp;</div>
<div>&nbsp;</div>
​
</body>
</html>