title: automatic `clear: both` after set of floated items
body: <p>I have a CMS with custom Elements, some of them shall be floated with each other. My idea is to use CSS3 to automatic insert a <code>clear: both</code> at the end of them without add a extra div with class="clear".</p>
  
  <p>I try to this clear:both work around: <a href="https://stackoverflow.com/a/6681806/2481955">https://stackoverflow.com/a/6681806/2481955</a></p>
  
  <p>And use the <code>+</code> CSS Selector to select the last float-Element.</p>
  
  <p><a href="http://jsfiddle.net/xt3uhuxn/9/" rel="nofollow noreferrer">http://jsfiddle.net/xt3uhuxn/9/</a> (Updated with different cases)</p>
  
  <pre><code>.float {
      float: left;
  }
  .float + .float::after {
  
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
      }
  </code></pre>
  
  <p>But as you can see the ::after-Content is inserted into the Div, not after the div. What could I do to archive my goal (stop floating if no mor float elements are coming)</p>
  
  <p><strong>Edit:</strong> I found an approach: <a href="http://jsfiddle.net/xt3uhuxn/11/" rel="nofollow noreferrer">http://jsfiddle.net/xt3uhuxn/11/</a> The question is, is this a no-go or can I do it like this for the hole site and just set for every element that get floated: <code>clear: none;</code> ?</p>