Parent 项目高度未通过 clearfix 解决

Question

无法弄清楚为什么我的 div.partner-item 不会采用它的 child 元素的高度。在这里 https://jsfiddle.net/edjcqkke/2/ 查看我的 fiddle。如果您检查 'partner-item' div，您会发现它没有其 children 元素的高度。我已经清除了我的花车，但仍然无法获得 parent 高度来识别它的 children 的高度。我的 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 属性。因此它不会从 parent 元素中获取任何 space。这就是为什么 <div class="flipper"> 无法识别它是 child 的高度。

Parent 项目高度未通过 clearfix 解决

Parent item height not solved by clearfix

html

css

height

clearfix