css - float 2 列后出现 div 问题

Question

作为我的问题，我 float 到 div 以制作一个简单的 2 列布局，但是当我尝试添加下一个普通 html 元素时遇到了麻烦。它进入 float 的 div。我很困惑，无法找到合适的关键字来搜索这个问题。所以这可能是一个重复的问题。

看看@Codepen

HTML

 <div class="container"><div class="hinfo"><div class="hleft">Back</div>
  <div class="hright"><h1>Drive Nuts</h1></div>
  </div>
 <div class="info"><div class="left">Call No.</div>
  <div class="right">Datas</div>
  </div>
  <div class="info"><div class="left">Call No.</div>
  <div class="right">Datas</div>
  </div><div class="info"><div class="left end">Call No.</div>
  <div class="right end">Datas</div>
  </div>
  </div>
<div style="clear:both;"></div>
<div class="download"><a href="">Pull now</a></div>

CSS:

    body {
    background: #34495e;
    padding: 50px 0px;
  }

.end {
    -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.48);
  }

.container {
    background: #ecf0f1;
    min-height: 480px;
    width: 700px;
    margin: 0px auto;
  }

.container h1 {
    margin: 0px;
    padding: 0px;
  }

.right, .left {
    display: inline-block;
    padding: 15px;
    Font-weight: bold;
    font-size: 20px;
    color: #fff;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

.left {
    width: 20%;
    background: #2c3e50;
    border-bottom: 1px solid #34495e;
  }

.right {
    width: 80%;
    background: #16a085;
    border-bottom: 1px solid #1abc9c;
  }

.hright, .hleft {
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

.hleft {
    width: 20%;
    background: #c0392b;
    border-bottom: 1px solid #e74c3c;
    line-height: 100px;
    text-align: center;
  }

.hright {
    width: 80%;
    background: #27ae60;
    border-bottom: 1px solid #2ecc71;
    padding-left: 10px;
    line-height: 100px
  }

.download {
    text-align: center;
 }

在这里，<div class="download"><a href="">Pull now</a></div>没有显示(它可能被上面的div遮住了。)

Answer 1

http://codepen.io/anon/pen/GgroMK

给你..

您试图在容器的 div 之后添加内容，因此它不在您试图实现的整个 div 部分中，注释掉会在下次帮助您。

<div class="container"><div class="hinfo"><div class="hleft">Back</div>
  <div class="hright"><h1>Drive Nuts</h1></div>
  </div>
 <div class="info"><div class="left">Call No.</div>
  <div class="right">Datas</div>
  </div>
  <div class="info"><div class="left">Call No.</div>
  <div class="right">Datas</div>
  </div><div class="info"><div class="left end">Call No.</div>
  <div class="right end">Datas</div>
  </div>
  <div class="download"><a href="">Pull now</a></div>
  </div>
<div style="clear:both;"></div>