html - CSS float container doesn't wrap around it's children, clearing the children doesn't work -

why doesn't div class "items" wrap around "item"s? applying clear: both children doesn't help. section not wrap around "item"s.

.items {      background: #ff0;      width: 1000px;      display: block;  }    .item1,  .item2,  .item3 {      width: 290px;      height: 350px;      float: left;      margin-left: 23px;      margin-top: 80px;      background-color: #cbcbcb;  }

<section>    <div class="items">      <div class="item1">        <h3>php testing</h3>      </div>      <div class="item2">        <h3>jquery testing</h3>      </div>      <div class="item3">        <h3>another one</h3>      </div>    </div>  </section>

or try .items{overflow:hidden}