不扩展父元素高度的元素

我有一个容器，其中放置了一堆元素，我的期望是容器会向下扩展，因为容器中充满了元素。不幸的是，这种情况并非如此。我有一些div浮在我的容器边缘。我能够用一堆中断标签来解决这个问题，但这是一个sl solution的解决方案。不扩展父元素高度的元素

也许我的CSS不正确，但我不知道在哪里。长选择清单和主要描述应该是驻留在上面的白色方框内。

这是Fiddle。

编辑：Uwe带领我去研究漂浮物。我发现在正常流程布局中不考虑花车。那么这是如何解决的？

编辑2：我找到了一个clearfix解决方案。

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
* html .clearfix { 
    height: 1%; 
} /* Hides from IE-mac \*/ 
    .clearfix { 
     display: block; 
}

来源

2012-06-10 Jon

我猜的是'float'CSS属性是这个原因（虽然我不是这些东西的专家）。 –

我已经偶然发现了一个clearfix解决方案。看到我编辑的帖子。 – Jon

@Jon：另一个clearfix解决方案（更短）：http://nicolasgallagher.com/micro-clearfix-hack/ – Geert

有很多方法可以清除浮标;只需追加overflow: hidden;至.main即可解决您的问题。

实际上，直接清除导致问题的浮动可能更好，而不是将修复应用到父div。我真的建议添加以下属性，而不是到.bottom：

.bottom { 
    clear: both; 
    overflow: hidden; 
}

clear: both发生在.content清除花车的照顾。
overflow: hidden负责清除漂浮在.bottom

你也应该考虑除了class属性为你的HTML标签使用id属性。

来源

2012-06-10 09:59:01 Wex

不扩展父元素高度的元素

回答

相关问题