html - div 太短——clearfix 不起作用，但我的元素没有 float

Question

我在我网站的 .content div 上使用 html5 样板 clearfix。但是在两个页面上，.content div 的内容实际上比我给它的最小高度长，它们被砍掉了。但 clearfix 通常有助于修复由父 div 中的 float 元素引起的问题。但是我的 .cell div 没有 float 。

<div class="content clearfix">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    //etc
</div>




//css
.clearfix:before, .clearfix:after {    
 content: " "; /* 1 */
display: table; /* 2 */
}

.cleafix:after {
    clear: both;
}
.cell {
box-shadow: 5px 3px 5px #ccc;
display: inline-block;
font-size: 1.25em;
margin: 15px 10px;
min-height: 250px;
vertical-align: top;
width: 365px;
}

.content {
border-left: 1px dotted #eee;
float: right;
height: 100%;
margin-bottom: 100px;
margin-left: 10px;
overflow: visible;
padding-left: 15px;
text-align: center;
width: 779px;
}

Answer 1

发生这种情况的原因是因为 .content 的高度是相对于父级的高度，而父级的高度又是相对于窗口的高度。

因此，子元素 .content 的高度永远不会超出此高度，因为它受到父元素的限制。删除以下内容:

.content {
    height: 100%;
}