html - Why does 'clear:left' also clears right? -

I am struggling to work CSS floating (in my head)

the following example Note on:

  & lt; Style type = "text / css" & gt; Div.container {width: 500px; } Div.left {float: left; Clear: left; } Div.right {float: right; } & Lt; / Style & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "left" & gt; Left data 1 & lt; / Div & gt; & Lt; Div class = "left" & gt; Left data 2 & lt; / Div & gt; & Lt; Div class = "right" & gt; Rightdata 1 & lt; / Div & gt; & Lt; Div class = "right" & gt; Correct data 2 & lt; / Div & gt; & Lt; Div class = "right" & gt; Rightdata 3 & lt; / Div & gt; & Lt; Div class = "right" & gt; Rightdata 4 & lt; / Div & gt; & Lt; / Div & gt;  

This will give the following output:

 + ------------------------ - ------------------------------------------ + | Bendetta 1 | | Leftdata 2 rightdata 1 rightdata 2 rightdata 3 rightdata 4 | | | + ------------------------------------------------- ------------------- + 

Although I was expecting this:

 + ------- - ------------------------------------------------ - --------- + | Leftdata 1 rightdata 1 rightdata 2 rightdata 3 rightdata 4 | | Bayandeta 2 | | | + ------------------------------------------------- ------------------- + 

Why is clear: left; Also clearing the right?

---

My goal:

I just want to add a clear: Correct; DIV marked with class: right. It should create the following:

  & lt; Style type = "text / css" & gt; Div.left {float: left; Clear: left;} div.right {float: right; Explicit: Correct;}  / Style & gt;  

 + -------------------------------------- -------------------------- + + | Leftdata 1 rightdata 1 | | Leftdata 2 rightdata 2 | | Rightdata 3 | | Daandeta 4 | + ------------------------------------------------- ------------------- + 

 < Code> & lt; Style type = "text / css" & gt; Div.left {float: left;} div.right {float: right;} br.clear {clear: both;} & lt; / Style & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "left" & gt; & Lt; Div & gt; Data 1 & lt; / Div & gt; & Lt; Div & gt; Data 2 & lt; / Div & gt; & Lt; Div & gt; Data 3 & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "right" & gt; & Lt; Div & gt; Correct data 1 & lt; / Div & gt; & Lt; Div & gt; Correct data 2 & lt; / Div & gt; & Lt; Div & gt; Correct data 3 & lt; / Div & gt; & Lt; / Div & gt; & Lt; Br class = "clear" /> & Lt; / Div & gt;