clearfix 无法解决父项高度

Question

无法弄清楚为什么我的 div.partner-item 不会占用它的子元素的高度。在这里查看我的小提琴https://jsfiddle.net/edjcqkke/2/。如果您检查 'partner-item' div，您会发现它没有其子元素的高度。我已经清除了我的浮动，但仍然无法让父级高度识别其子级的高度。我的html结构：

<div id="partner-container" class="standard small container">
  <div class="partner-item">
    <div class="flipper">
      <div class="front">
        <img class="logo" src="http://fillmurray.com/300/150">
        <h2>Test Page</h2>
        <p>www.googlre.vi9m</p>
      </div>
    </div>
  </div>
  <div class="partner-item">
    <div class="flipper">
      <div class="front">
        <img class="logo" src="http://fillmurray.com/300/150">
        <h2>new-item</h2>
        <p>http://www.google.com</p>
      </div>
    </div>
  </div>
  <div class="partner-item">
    <div class="flipper">
      <div class="front">
        <img class="logo" src="http://fillmurray.com/300/150"><h2>partner-item</h2><p>undefined</p>  
      </div>
    </div>
  </div>
</div>
<div class="clearfix"></div>

Answer 1

您的<div class="front"> 具有position: absolute 属性。所以它不会占用父元素的任何空间。这就是为什么<div class="flipper"> 无法识别它是孩子的​​身高。