title: Firefox overflow hidden requires float
body: <p>I tested on Chrome, Opera, even Internet Explorer, my below css works as expected.</p>
  
  <pre><code>.carousel
  {
      position:relative;
      overflow:hidden;
      width:100%;
      margin-bottom:0px;
  }
  
  .carousel-inner
  {
      font-size:0;
      position:absolute;
      width:6882px;
  }
  
  .carousel-item
  {
      background-repeat:no-repeat;
      background-position:0px 0px;
      display:inline-block;
      cursor:pointer;
      margin:0px 16px;
  }
  </code></pre>
  
  <p>But when I tested on Firefox, <code>.carousel-inner</code> is not hiding overflowing element.</p>
  
  <p>In order to add the same effect, I need to add <code>float:left</code> to <code>.carousel-inner</code>, which renders <code>width:100%</code> to be ignored.</p>
  
  <p>Is there another work around specific to Firefox?</p>
  
  <p>I tried <code>clear:both</code> with no luck.</p>
  
  <p>Here is jsfiddle <a href="http://jsfiddle.net/samueladam/VKPku/3/" rel="nofollow noreferrer">example</a></p>
  
  <p>And image (Chrome, IE, Opera) : </p>
  
  <p><img src="https://i.stack.imgur.com/wQ5he.jpg" alt="image"></p>
  
  <p>Firefox : </p>
  
  <p><img src="https://i.stack.imgur.com/xIMAr.jpg" alt="firefox"></p>
  
  <p>Cheers !</p>