title: CSS ::after pseudo element clear not working
body: <p>Here is a fiddle:  <a href="http://jsfiddle.net/e4y05yyz/1/" rel="nofollow">http://jsfiddle.net/e4y05yyz/1/</a></p>
  
  <p>Working on a responsive layout.  I would expect that the :after pseudo element would clear both floats and the the element with class .masthead-middle would drop to the next line, but it does not.  If I put a clear: both; on the masthead-middle element that works, and I can do that, but I don't understand why the float is not clearing based on the :after.  The after pseudo element will be added using a media query, but I can't get it to work in "standard" css.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="header-inner"&gt;
          &lt;div class="masthead"&gt;
              &lt;div class="masthead-inner"&gt;
                  &lt;div class="masthead-left"&gt;LEFT&lt;/div&gt;
                  &lt;div class="masthead-right"&gt;RIGHT&lt;/div&gt;
                  &lt;div class="masthead-middle"&gt;MIDDLE&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>header {
      position: relative;
      width: 100%;
      padding-top: 10px;
  }
  header .header-inner {
      width: 100%;
      box-sizing: border-box;
      margin: 0 auto;
      padding: 0 10px;
  }
  header .masthead {
      position: relative;
      width: 100%;
      box-sizing: border-box;
  }
  header .masthead .masthead-inner {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
  }
  header .masthead .masthead-left {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      float: left;
      text-align:left;
      width: auto;
      padding-right: 15px;
      overflow: hidden;
  }
  header .masthead .masthead-right {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      float: right;
      width: auto;
      padding-left: 15px;
      overflow: hidden;
  }
  
  header .masthead .masthead-right:after {
      content: "";
      display: table;
      clear: both;
  }
  
  header .masthead .masthead-middle {
      box-sizing: border-box;
      width: auto;
      overflow: hidden;
  }
  </code></pre>