title: How to force div element to keep its contents inside container
body: <p>I am making a css menu. For this I am using a <code>ul</code>. When I make <code>li</code> float left then all <code>li</code>'s gets outside of the ul. I mean the height of <code>ul</code> become zero. How can I make <code>li</code> display inside <code>ul</code> after giving float left. </p>
  
  <p>One way to do is to make a <code>div</code> tag with some common class and add clear: both to it in css but I do not want this.</p>
  
  <p>How can I solve this?</p>