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-height属性的min-width值，这样就不会必须再使用overflow: hidden;。

1. contain-floats

  

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