如果浮动应用于子元素，Css样式删除背景颜色

Question

我想尝试制作一个网页。继css我用于样式部分之后，当我给包装器一个背景颜色它的工作但是当我去设计子元素时，包装器的底色不起作用，可能是什么原因？请帮帮我！

body{margin:0px}

.wrapper{width:960px; margin:0 auto; background-color:#ccc;}

 .wrapper > .header{width:960px;}

.wrapper > .header > .logo{width:209px; height:50px; float:left;}

.wrapper > .header > .links{float:right;}

Answer 1

您需要浮动包装器以使其包含其中包含的元素的高度，然后将显示背景颜色。 当您检查Chrome中的.wrapper时它会给出什么尺寸，如果它是0x0，则上述修复将起作用。

Answer 2

原因是你的“包装”没有高度，因为浮在里面。 要解决这个问题，你可以做两件事：

1. 清除浮动（推荐）
2. 将overflow：hidden添加到包装器

1）清算浮动

.floatstop:after {content: ".";display :block;height :0;clear :both;visibility :hidden;}
*:first-child+html .floatstop {min-height: 1px;} /* ie7 fix */
* html .floatstop { height: 1%;} /* ie6 fix */

<div class="wrapper floatstop"> .elements.. </div>

2）溢出技巧

.wrapper {
  width:960px;
  margin:0 auto;
  background-color:#ccc;
  overflow: hidden;
}