CSS3 清除浮动的方法示例

// html代码
  <section>
    <div class="origin1">
      ![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>想象我是一大段文字</span>
    </div>
    <div class="float1">
      ![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>想象我是一大段文字</span>      
    </div>
  </section>

// css代码
.origin1 span {
  display: block;
  width: 250px;
  height: 120px;
  background-color: #78f182;  
}

.float1 img{
  float: left;
}

.float1 span {
  display: block;
  width: 250px;
  height: 120px;
  background-color: #78f182;
}

// html代码
  <section class="section2">
    <ul>
      <li><a href="#">产品中心</a></li>
      <li><a href="#">服务中心</a></li>
      <li><a href="#">新闻中心</a></li>
      <li><a href="#">客户见证</a></li>
      <li><a href="#">招贤纳士</a></li>
    </ul>
  </section>

// css代码
.section2 li{
  list-style: none;
  float: left;
  padding: 20px;
  height: 20px;
  background-color: #1249c3;
  border-right: 1px solid #a0a2a2;
}

.section2 li a {
  color: #fff;
}

// html代码
    <ul>
      <li><p>互动板块 li</p></li>
      <li><p>学习板块 li</p></li>
      <li><p>留言板块 li</p></li>
      我是本应该包裹在3个板块外面的父元素ul
    </ul>

    <div class="new">我是跟在ul后面的新div</div>

// css代码
ul {
  padding: 20px;
  background-color: #b7db05;
}

ul li {
  width: 200px;
  height: 200px;
  background-color: #e3e3e3;
  margin-right: 20px;
  text-align: center;
  float: left;
}

.new {
  height: 50px;
  background-color: #1be751;
}

// html代码
    <ul>
      <li><p>互动板块 li</p></li>
      <li><p>学习板块 li</p></li>
      <li><p>留言板块 li</p></li>
      我是本应该包裹在3个板块外面的父元素ul
      <div style="clear:both;"></div>        // 新增代码
    </ul>

    <div class="new">我是跟在ul后面的新div</div>

// css代码
ul {
  padding: 20px;
  background-color: #e7a5b8;
  overflow: hidden;
}

// css代码
ul:after {
  content: "";
  clear: both;
  display: block;
}