高度混乱：自动

Question

在以下场景中，我不明白为什么元素wrapper和content的高度未正确设置，即使它们设置为height: auto，这意味着2个div与类包装不会显示在包装器和内容div中。

我在这个JSfiddle中重新创建了这个问题：

http://jsfiddle.net/202oy3k8/

如您所见，即使包装器高度设置为auto，两个橙色div也不会显示在包装器div内。是什么导致了这个问题，我该如何解决？

HTML CODE：

<div id="wrapper">
    <div id="content">
        <div id="top">

        </div>
        <div class="dash"></div>
        <p id="header">Header</p>

        <div class="wrap">
        </div>
        <div class="wrap">
        </div>
    </div>
</div

CSS代码：

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#wrapper {
    background-color: black;
    margin-top: 2%;
    width: 100%;
    height: auto;
}

#content {
    background-color: green;
    width: 1224px;
    height: auto;
    margin: auto;
    text-align: center;    
}

#top {
    background-color: pink;
    height: 400px;
    width: 60%;
    margin: auto;
}

.dash {
    width: 80%;
    margin: auto;
    margin-bottom: 1%;
    height: 2px;
    background-color: black;
}

p#header {
    margin: 0;
    text-align: center;
}

.wrap {
    background-color: orange;
    margin: 1%;
    float:left;
    width: 48%;
    height: 400px;
}

Answer 1

您必须添加clear属性以清除已应用于.wrap div的左浮动。

  

什么是浮动和清除？

     

如果你看一个典型的杂志，你会看到图像说明   文章，文字在他们周围流动。 CSS中的float属性   创建是为了在网页上允许这种样式的布局。漂浮一个   图像 - 或任何其他元素 - 推动它到一边和   让文本在另一边流动。清除浮动元素意味着   如有必要，将其推下，以防止它出现在旁边   漂浮。虽然浮动是用于任何元素，   设计师最常用它来实现多列布局   无需滥用表格标记。

＆＃13;

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#wrapper {
  background-color: black;
  margin-top: 2%;
  width: 100%;
  height: auto;
}
#content {
  background-color: green;
  width: 400px;
  height: auto;
  margin: auto;
  text-align: center;
}
#top {
  background-color: pink;
  height: 400px;
  width: 60%;
  margin: auto;
}
.dash {
  width: 80%;
  margin: auto;
  margin-bottom: 1%;
  height: 2px;
  background-color: black;
}
p#header {
  margin: 0;
  text-align: center;
}
.wrap {
  background-color: orange;
  margin: 1%;
  float: left;
  width: 48%;
  height: 400px;
}
.clear {
  clear: left;
}

＆＃13;

<div id="wrapper">
  <div id="content">
    <div id="top"></div>
    <div class="dash"></div>
    <p id="header">Header</p>
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="clear"></div>
  </div>
  </div

＆＃13;

＆＃13;

＆＃13;

参考：w3.org - Floats and clearing - CSS-Tricks - What is "Float"?