Question

在我的新设计中，我使用了包装器div。我的问题是我的包装内的元素浮动在我的div之外，我在css-tricks.com处的 Float Clearing 部分中描述了问题。

我通过添加overflow:hidden解决了这个问题，一切正常。只有一个问题。在我的标题包装器中，我有一个不再可见的下拉菜单。

我的下拉菜单位于我的settings容器内。

我尝试将settings设置为position: absolute; z-index: 800;，但这没有帮助。

如何解决我的包装器问题，并且仍能在包装器外显示特定项目？

更新
我刚看了一下bootstrap css，他们正在使用display:table。这与overflow:hidden一样好用。是否有使用display:table的蛀洞？如果没有，为什么没有人使用它而不是所有其他不同的解决方案？

他们还有其他CSS

.wrapper:before, .wrapper:after {
    content: "";
    display: table;
    line-height: 0;
}
.wrapper:after {
    clear: both;
}
.wrapper:before, .wrapper:after {
    content: "";
    display: table;
    line-height: 0;
}

我需要这个吗？我认为我的小提琴没有任何好处：http://jsfiddle.net/sXVbT/5/。

Answer 1

display: block 中的table代替.wrapper:after ，（大部分）都可以正常使用。

一般来说，人们倾向于避免使用display: table及其在css中的同类群，因为他们（不当地）承担了旧的“布局与地狱”的耻辱。我说“不应当”，但我必须承认，我也很少使用它们。 display: table-cell确实有各种副作用，但我没有使用display: table来判断它是否有任何副作用。

但是我很确定父元素上的display: table没有做太多（在清除浮点数方面） - Chrome似乎在删除css的:after部分时确认了你的jsFiddle。

实际上是.wrapper:after完成工作（尽管你不需要两个相同的css规则）：

.wrapper:before, /* You can leave this out. It prevents top margin-collapse, and isn't part of the clear solution itself */ .wrapper:after { content: ""; /* Adds content, so you don't have to. An Opera bug means you may need a space: " " */ display: table; /* May be 'block', but if you use :before, it must be 'table' */ line-height: 0; /* Not sure why it would be needed */ } .wrapper:after { clear: both; /* Does the actual clearing for you */ }

所以简短版本是：

.wrapper:after { content: ""; display: block; clear: both; }

除非您孩子元素的上边距崩溃。在这种情况下，使用bootstrap版本（虽然我仍然不认为需要行高）：

.wrapper:before, .wrapper:after { content: ""; display: table; line-height: 0; } .wrapper:after { clear: both; }

要明确的是，在部分之前做的是使此解决方案完全像overflow: hidden一样工作（除了不需要的部分，其中溢出的内容变得很好，隐藏）。 overflow: hidden的优点是允许任何未浮动的元素保持其顶部和底部边距。其他一些解决方案会破坏这些边距，如果在容器和非浮动子节点之间需要空间，则必须在容器上使用填充。

:before技巧让包含的非浮点元素保持其上边距。除了实际清除花车外，:after部分已经处理了它们的底部边距。

如何在不使用overflow：hidden的情况下避免div溢出我的容器？

1 个答案: