怎么在CSS3中清除浮动-创新互联

// html代码
  

    
      ![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      想象我是一大段文字
    

// 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;
}

2、 浮动经常被用来做什么

因为浮动可以让块状元素并排显示，所以经常用来做导航栏，内容分块栏等布局。

// html代码
  
    

      
产品中心
      
服务中心
      
新闻中心
      
客户见证
      
招贤纳士
    
  

// 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;
}

3、 为什么要清除浮动

通过上图可以看到，当三个板块左浮动以后，因为它们脱离了正常文档流，所以它们的父元素ul在不设置高度的情况下，无法被子元素撑开(能够看到背景色是因为我设置了ul的padding为10px)，所以当你在后边新增元素的时候，自然会排在ul后边，也就是插入到了3个浮动的板块下面。
这并不是我们想要的，这就是要清除浮动的原因。

// html代码
    

      
互动板块 li
      
学习板块 li
      
留言板块 li
      我是本应该包裹在3个板块外面的父元素ul
    

    我是跟在ul后面的新div