清除浮动有哪些方法？

1、如果是两个元素，其中的一个浮动，另一个没有浮动，那么没有浮动的元素可以使用clear:both方法，使自己不跟随前一个元素来走。

2、如果是父级包含自己的情况，那么有如下2种方法，一起看下：

      <ul id="list">
           <li>1</li>
           <li>2</li>          
           <li>3</li>
      </ul>

方法1：给父级添加伪类，对伪类设置，具体代码如下：

       <style type="text/css">
        *{
           margin: 0;
           padding: 0;
          }
        #list{
          list-style: none;
          width: 500px;
          background-color: #0000FF;
          margin: 50px auto;
          }
         /* 给父级加上伪类 */
        #list:after{
          content: "";
          display: block;
          clear: both;      /* 清除浮动 */
          height: 0;
          visibility: hidden;   /* 占位隐藏 */
         }
        #list li{
          float: left;
          width: 100px;
          height: 100px;
          background-color: #009933;
          margin-right: 10px;
        }
      </style>

方法2：给父级添加overflow：hidden , 但是会隐藏超出父级元素范围的元素。