Can someone explain in detail how the clear works in this code?

I am new to CSS. I have a Top, Right, and Content div. I want it to look like this:

Top     Right

Content

However, it is showing up like this:

Top Content Right

I know I need a clear somewhere, but I am not sure where because I am unclear on how clears actually work, so can someone please explain the html code below on where I would apply the clear and what type of clear I would choose (left, right, or both). Here is the stripped down html code:

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="width:500px; height:600px; 
            border:1px solid blue;">Content</div>

From stackoverflow

• Put a DIV that clears right after the Right div:

  <div style="float:left; width:600px; height:100px; 
              border:1px solid black;">Top</div>
  <div style="float:right; width:200px; height:800px; 
              border:1px solid red;">Right</div>
  <div style="clear:both;"></div>
  <div style="width:500px; height:600px; 
              border:1px solid blue;">Content</div>
  

  Xaisoft : Why does this work? and can't I put the clear in one of the existing Divs without creating another one.

• Put the clear on the Content <div>:

  <div style="float:left; width:600px; height:100px; 
              border:1px solid black;">Top</div>
  <div style="float:right; width:200px; height:800px; 
              border:1px solid red;">Right</div>
  <div style="width:500px; height:600px; clear: both;
              border:1px solid blue;">Content</div>
  

  This pushes the Content <div> so that it is below any floating elements (from the left or the right).

  A side note: you probably should use CSS classes or the id attribute for convenience instead of inlining using style.

  Xaisoft : Do I have to use both in this case?

  Mark Hurd : No, you can use either an ID or a class to accomplish the clearing. Depends on what other rules you have applied to the div and whether or not higher specificity is needed.

• Although it doesn't work in all cases the WebToolkit's clearfix technique helps alleviate most of these concerns.

  Usage

  <div class="clearfix">
    <div style="float:left;">left</div>
    <div style="float:right;">right</div>
  </div>
  <div>
    Some block content that doesn't overlap the floats
  </div>
  

  Also see the demo

  Code

  .clearfix:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
  
  .clearfix {
      display: inline-block;
  }
  
  html[xmlns] .clearfix {
      display: block;
  }
  
  * html .clearfix {
      height: 1%;
  }
  

  Xaisoft : Whew, my brain is melting after looking at this. Thanks though.

  bendewey : Thats the beauty of using this, you don't have to think about it just wrap your content in a clearfix tag and done.