css - CSS div边框显示，但透明

Question

我正在尝试将边框仅应用于具有纯色的 div 的左侧和右侧。当我查看页面时，其中的元素（设置为填充 div 宽度）移动了适当数量的像素，但边框本身（纯色）似乎不存在，或者边框本身是透明的。我如何让纯色边框实际出现？这是CSS段：

#menu {
border-left: 10px solid #490707;
border-right: 10px solid #490707;
}

Answer 1

边框没有出现，因为#menu高度由于具有浮动后代（列表项）而“折叠”..您可以#menu通过添加来为 的后代建立新的块格式化上下文，overflow: hidden;以便尊重浮动。

http://jsfiddle.net/rtqAq/1/

最终，当浏览器采用CSS Intrinsic & Extrinsic Sizing Module Level 3时，您将能够使用和属性的contain-floats值，因此您不必再使用了。min-heightmin-widthoverflow: hidden;

1. contain-floats

等效于 'min-content'，除了当应用于块框的范围时，它会强制内部范围足够大以包含源自块内部并参与相同块格式化上下文的任何浮动的边距框块的直接内容。