CSS: hasLayout hack

Clear float using "clear:both;"

<style>
ul {
 list-style: none;
}

ul li {
 float:left; 
 width:100px; 
 border:1px solid #ccc; 
 margin-right:5px; 
 text-align:center;
}

.clear {
 clear:both;
}

.flower {
 color:red;
 font-weight:bold;
}
</style>

<ul>
<li>coffee</li>
<li>tea</li>
<li>water</li>
</ul>

<div class="clear"></div>
<div class="flower">rose</div>

Add either width or height with a overflow hidden, it should cleared the float, without adding "clear:both;"

<style>
ul {
 list-style: none; 
 width:100%; 
 overflow: hidden;
}

ul li {
 float:left; 
 width:100px; 
 border:1px solid #ccc; 
 margin-right:5px; 
 text-align:center;
}

.clear {
 clear:both;
}

.flower {
 color:red; 
 font-weight:bold;
}
</style>

<ul>
<li>coffee</li>
<li>tea</li>
<li>water</li>
</ul>

<div class="clear"></div>
<div class="flower">rose</div>

Refer site: http://chatter.customdesigns.com.au/?p=123