css - CSS包装背景没有出现

Question

我有这样的结构

<div class="contentWrapper">
<div class="left_side"></div>
<div class="right_side"></div>
</div>

我的 contentWrapper 类具有这种风格：

.contentWrapper {
margin: 0px auto;
padding: 0px;
width: 990px;
text-align: left;
background-color: #FFF;
box-shadow: 0 2px 7px rgba(0,0,0,0.25);
position: relative;
z-index: 20;
}

但不出现背景颜色和边框。

我的 left_side 和 right_side 类有这样的样式：

.left_side {
width: 630px;
float: left;
padding: 0 10px 0;
}

.right_side {
width: 300px;
float: right;
margin: 0 20px 20px;
}

如果我关闭左侧或右侧的浮动，但出现背景和边框..我该如何解决这个问题，我真的需要左右两侧的背景和边框。

谢谢，J

Answer 1

css中的类名是错误的。在 html 中它们被称为 left_side 和 right_side，而在 css 中则有 right_column 和 left_column。

小提琴

.contentWrapper {
    margin: 0px auto;
    padding: 0px;
    width: 990px;
    text-align: left;
    background-color: #FFF;
    box-shadow: 0 2px 7px rgba(0,0,0,0.25);
    position: relative;
    z-index: 20;
    overflow: hidden; /* THIS /*
}

这将清除浮动并基本上修复它。当您浮动一个元素时，它会跳出正常层，导致父级表现得好像里面没有任何东西一样。