text: Q:
  
  "clear: both" is clearing too much. Is this normal behaviour or is it a browser bug?
  
  I have the following code:
  http://jsfiddle.net/agLap/
  
  .navigation{
      background-color: #FF0000;
      width: 100px;
      height: 500px;
      float: left;
  }
  
  .content{
      background-color: #00FF00;
      margin-left: 100px;
  }
  
  .first{
      background-color: #0000FF;
      height: 100px;
      width: 100px;
      float: left;
  }
  
  .second{
      background-color: #FF00FF;
      height: 100px;
      width: 100px;
      float: left;
  }
  
  .third{
      background-color: #FFFF00;
      height: 100px;
      clear: both;
  }
  <div class="navigation">
  </div>
  
  <div class="content">
      <div class="first">first</div>
      <div class="second">second</div>
      <div class="third">third</div>
  </div>
  
  Problem is: I want the yellow box to appear inside the green box, but underneath the 2 other boxes.
  So I'm doing
  clear: both;
  
  on the yellow box. But that is clearing too much. It's also clearing the red navigation div. And it's not even inside that box.
  Should this be how "clear: both" works or is this a browser bug?
  
  A:
  
  7 years later (with slightly better css skills :-) ), I found good solution to my own problem: http://jsfiddle.net/kzjyfLto/
  Just replace the
  margin-left: 100px;
  
  with
  float: left;
  
  This makes the content block stick to the navigation block and seems to create a clean slate for the content of the content block.
  
  