Html 如何避免div溢出容器而不使用overflow:hidden？

在我的新设计中，我使用了一个包装器

div

。我的问题是包装器中的元素在我的div之外浮动，我在上一节中得到了浮动清除部分描述的问题

我通过添加

overflow:hidden

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

我的下拉菜单在我的

设置
容器中

我已尝试将
设置设置设置为
位置：绝对；z指数：800，但这没有帮助

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

她是我的小提琴：

更新

我刚刚浏览了一下引导css，他们正在使用
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;
}

我需要这个吗？我看不出我的小提琴有什么好处：。
它（大部分）可以与
display:block
配合使用，而不是
中的
table
。包装器：after

一般来说，人们倾向于避免使用css中的
display:table
及其同伙，因为他们（不公正地）承受着旧的“带表布局”的耻辱。我说“不公正”，但我必须承认，我也很少使用它们
display:table单元格
确实有各种副作用，但我还没有使用足够的
display:table
来判断它是否有副作用

但是我很确定父元素上的
display:table
没有多大作用（在清除浮动方面），而Chrome似乎在删除JSFIDLE上css的
：after
部分时证实了这一点

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

.wrapper:before，/*您可以省去这个。它阻止了顶部的移动
保证金崩溃，这不是清仓交易的一部分
解决方案本身*/
.包装工：之后
{
内容：“；/*添加内容，因此您不必这样做。
Opera bug意味着您可能需要一个空间：“*/
显示：table；/*可以是“block”，但如果使用
：之前，它必须是“table”*/
线条高度：0；/*不确定为什么需要它*/
}
.包装工：之后{
清除：两者；/*是否为您进行实际清除*/
}

因此，简短的版本是：

.wrapper:after{
内容：“；
显示：块；
明确：两者皆有；
}

除非子元素的上边缘折叠。在这种情况下，使用引导版本（尽管我仍然不认为需要行高度）：

.wrapper:before，.wrapper:after{
内容：“；
显示：表格；
线高：0；
}
.包装工：之后{
明确：两者皆有；
}

需要明确的是，：before部分所做的是使此解决方案完全像
溢出：隐藏
（溢出内容变得隐藏的不需要的部分除外）<代码>溢出：隐藏的
的优点是允许任何未浮动的包含元素保留其上下边距。其他一些解决方案会折叠这些边距，如果需要容器和非浮动子对象之间的空间，则必须在容器上使用填充

：before
技巧允许包含的非浮点元素保持其上边距。
：在
之后，除了实际清理浮动之外，部分已经处理了它们的底部边距。
嗨，吉米，谢谢你的深入回答。如果我从
.wrapper
中删除
display:table
，并且仅使用
。wrapper:after
，它将不会使用
边距：0自动将包装居中。我认为这是因为迈耶重置，因为你的建议是无效的。谢谢：）PS。也尝试了
。包装器：之前，.wrapper:after
哦，是的，
显示：表
还有其他用途。例如，设置
边距：自动
在不指定要居中的元素宽度的情况下工作。可能是这样，或者是别的什么