div没有伸展下来

Question

我无法让这个红色div包裹延伸到其他div之后。我尝试过使用clear：both;属性，以及其他一些组合，但无济于事。谁能告诉我我做错了什么？感谢

#footer-wrap{
	width:100%;
	height:auto;
	margin: 0 auto;
	background:#dc0000;
}
#footer{
	width:960px;
	height:auto;
	margin: 0 auto;
	background:#dc0000;
	padding: 30px 0 30px 0;
}
.footer-class{
	width:126px;
	height:200px;
	float:left;
	background:#093;
	margin:0 30px 0 0;
}
.footer-class-end{
	width:180px;
	float:right;
	background:#FF0;
}

<div id="footer-wrap">
<div id="footer">
<div class="footer-class"><h5>products</h5></div>
<div class="footer-class"><h5>support</h5></div>
<div class="footer-class"><h5>information</h5></div>
<div class="footer-class"><h5>legal</h5></div>
<div class="footer-class"><h5>interactive</h5></div>
<div class="footer-class-end"><h5>twitter</h5></div>

</div></div>

Answer 1

您必须使用float清除左clear: left。

#footer-wrap {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #dc0000;
}
#footer {
  width: 960px;
  height: auto;
  margin: 0 auto;
  background: #dc0000;
  padding: 30px 0 30px 0;
}
.footer-class {
  width: 126px;
  height: 200px;
  float: left;
  background: #093;
  margin: 0 30px 0 0;
}
.footer-class-end {
  width: 180px;
  float: right;
  background: #FF0;
}
.clear {
  clear: left;
}

<div id="footer-wrap">
  <div id="footer">
    <div class="footer-class">
      <h5>products</h5>
    </div>
    <div class="footer-class">
      <h5>support</h5>
    </div>
    <div class="footer-class">
      <h5>information</h5>
    </div>
    <div class="footer-class">
      <h5>legal</h5>
    </div>
    <div class="footer-class">
      <h5>interactive</h5>
    </div>
    <div class="footer-class-end">
      <h5>twitter</h5>
    </div>
    <div class="clear"></div>
  </div>
</div>

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

清除浮动而没有额外标记的新方法是将clear置于:after伪元素（但浏览器兼容性较低）。

#footer:after {
  content: "";
  clear: both;
  display: block;
}

#footer-wrap {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #dc0000;
}
#footer {
  width: 960px;
  height: auto;
  margin: 0 auto;
  background: #dc0000;
  padding: 30px 0 30px 0;
}
#footer:after {
  content: "";
  clear: both;
  display: block;
}
.footer-class {
  width: 126px;
  height: 200px;
  float: left;
  background: #093;
  margin: 0 30px 0 0;
}
.footer-class-end {
  width: 180px;
  float: right;
  background: #FF0;
}

<div id="footer-wrap">
  <div id="footer">
    <div class="footer-class">
      <h5>products</h5>
    </div>
    <div class="footer-class">
      <h5>support</h5>
    </div>
    <div class="footer-class">
      <h5>information</h5>
    </div>
    <div class="footer-class">
      <h5>legal</h5>
    </div>
    <div class="footer-class">
      <h5>interactive</h5>
    </div>
    <div class="footer-class-end">
      <h5>twitter</h5>
    </div>
  </div>
</div>

参考：MDN - Clear

Answer 2

或者只将overflow:hidden添加到包装器中。 http://jsfiddle.net/5a8vmr4r/1/

这是浮动元素的众所周知的问题......

Answer 3

您没有添加clearfix，这就是为什么它不起作用。

http://jsfiddle.net/5a8vmr4r/3/