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

你必须用 clear: left 向左清除 float。

#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/

div 缠绕不拉伸

div wraps not stretching down

html

css

word-wrap