3

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

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

我的下拉菜单在我的settings容器内。

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

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

她是我的小提琴：http: //jsfiddle.net/sXVbT/3/

更新
我刚刚看过 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/。

4

1 回答 1

2

它（大多数情况下）可以正常工作，display: block而不是table in.wrapper:after。

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

但我很确定display: table父元素并没有做太多（在清除浮动方面） - Chrome 似乎在删除:afterjsFiddle 上的 css 部分时确认了这一点。

它实际上.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;
}

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

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

.wrapper:after {
    clear: both;
}

需要明确的是， :before 部分所做的就是使该解决方案完全一样工作overflow: hidden（除了溢出内容变得隐藏的不需要的部分）。overflow: hidden具有让任何未浮动的包含元素保持其顶部和底部边距的优势。其他一些解决方案会折叠这些边距，如果您需要容器和非浮动子项之间的空间，则必须在容器上使用填充。

这个:before技巧让包含的非浮动元素保持它们的上边距。:after除了实际清除浮动之外，该部分已经处理了它们的底部边距。

于 2013-07-13T15:32:13.647 回答