title: Float with content that floats around and one that is underneath
body: <p>OK so I was reading a bit about floats. If something is left floated the content that come after it floats around the floated element right:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='block pink float'&gt;&lt;/div&gt;
    &lt;div class='block blue float'&gt;&lt;/div&gt;
    &lt;div&gt;Mr. Chairman, we have in this country one of the most corrupt institutions the world has ever known. I refer to the Federal Reserve Board and the Federal reserve banks. The Federal Reserve Board, a Government board, has cheated the Government of the United States and the people of the United States out of enough money to pay the national debt. The depredations and the iniquities of the Federal Reserve Board and the Federal Reserve banks acting together have cost this country enough money to pay the national debt several times over. ...
  
  Some people think the Federal reserve banks are United States Government institutions. They are not Government institutions. They are private credit monopolies which prey upon the people of the United States for the benefit of themselves and their foreign customers, foreign and domestic speculator sand swindlers, and rich and predatory money lenders. ...
  
  Those 12 private credit monopolies were deceitfully and disloyally foisted upon this country by bankers who came here from Europe and who repaid us for our hospitality by undermining our American institutions. Those bankers took money out of this country to finance Japan in a war against Russia.They created a reign of terror in Russia with our money in order to help that war along. They instigated the separate peace between Germany and Russia and thus drove a wedge between the Allies in the World War. ...
  
  Every effort has been made by the Federal Reserve Board to conceal its power but the truth is the Federal Reserve Board has usurped the Government of the United States. ...
  
  Mr. Chairman, when the Federal reserve act was passed the people of the United States did not perceive that a world system was being set up here which would make the savings of an American school-teacher available to a narcotic-drug vendor in Macao. They did not perceive that the United States was to be lowered to the position of a coolie country which has nothing but raw materials and heavy goods for export. That Russia was destined to supply man power and that this country was to supply financial power to an international superstate--a superstate controlled by International bankers and international industrialists acting together to enslave the world for their own pleasure.&lt;/div&gt;
    &lt;div class='block orange'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.float { float: left; }
  
  .block {
      width: 200px;
      height: 200px;
  }
  
  .pink { background-color: #ee3e64 }
  .blue { background-color: #44accf }
  .green { background-color: #b7d84b }
  .orange { background-color: #E2A741 }
  </code></pre>
  
  <p>Result is as I would expect: <a href="https://jsfiddle.net/vejxdn4z/" rel="nofollow">https://jsfiddle.net/vejxdn4z/</a></p>
  
  <p>But now if I change to HTML to:</p>
  
  <pre><code>  &lt;div class='block pink float'&gt;&lt;/div&gt;
    &lt;div class='block blue float'&gt;&lt;/div&gt;
    &lt;div class='block green'&gt;&lt;/div&gt;
    &lt;div class='block orange'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I get this: <a href="https://jsfiddle.net/gseqx6w7/" rel="nofollow">https://jsfiddle.net/gseqx6w7/</a></p>
  
  <p>Why are the pink and blue on top of the others and not acting the same as the first result?</p>