SOURCE

<ul class="demo clearfix">
  <li>
    1111111
  </li>
  <li>
    44444
  </li>
  <li>
    11115555111
  </li>
  <li>
    11155555551111
  </li>
  <li>
    44445555555
  </li>
  <div class="clear">
  </div>
</ul>

* {
  margin: 0;
  padding: 0;
  list-style: none;
  color: red
}
/*方法一:就是在浮动标签后面加个div为clear的样式（clear:both;height:0;overfolow:hidden）*/
/* .clear{
  overflow:hidden;
  clear:both;
  height:0;
} */
/***方法二：给在浮动元素的父云素上添加class=”demo clearfix”。****/
/* 		.clearfix{
		  *+height: 1%;
		}
		.clearfix:after{
		  content: '.';
		  height: 0;
		  display: block;
		  clear: both;
		  visibility:hidden;
		} */
/*方法三*/
/* .clearfix{
  overflow:hidden;
  _height:1%;
} */
/* f方法四 */
.clearfix{
  overflow:hidden;
  _zoom:1;
}

.demo {
  width:1300px;
  background:blue;
  
}

.demo li{
  width: 200px;
  height: 50px;
  line-height: 50px;
  background: #ccc;
  text-align: center;
  float:left;
  margin:0 10px;
}