title: Stop floating with the end of a tag
body: <p>I want to create a text that floats left around an image. Next paragraphs should only float around the next image.</p>
  
  <pre><code>&lt;div&gt;
     &lt;div style="float: right; padding: 0 0 1em 1em;"&gt;
        &lt;img src="myImage1.png" .../&gt;
     &lt;/div&gt;
     &lt;p&gt;
         This text should float around the...
     &lt;/p&gt;
     &lt;p&gt;
         ... above myImage1.png.
     &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div style="clear: both;"&gt;
     &lt;div style="float: right; padding: 0 0 1em 1em;"&gt;
        &lt;img src="myImage2.png" .../&gt;
     &lt;/div&gt;
     &lt;p&gt;
         This text should float around the...
     &lt;/p&gt;
     &lt;p&gt;
         ... above myImage2.png.
     &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to avoid having to add <code>style="clear: both;"</code> on the <strong>next</strong> div, but want the floating image automatically stop floating at the end of the first top-level <code>&lt;/div&gt;</code>, so each div can have the same style class:</p>
  
  <pre><code>&lt;div class="floatBlock"&gt;
     ...
  &lt;/div&gt;
  
  &lt;div class="floatBlock"&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>which especially becomes useful if there are -tags inside (the first floatBlock's image should not float below the h3):</p>
  
  <pre><code>&lt;div class="floatBlock"&gt;
     ...
  &lt;/div&gt;
  
  &lt;h3&gt;Lorem ipsum&lt;/h3&gt;
  
  &lt;div class="floatBlock"&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>I hope to have described my goal understandable.</p>
  
  <p>How to define the style for <code>floatBlock</code> so the nested images do not float outside?</p>