如何清除浮动（自梳版）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试浮动</title>
    <style type="text/css">
.container{
    width:200px;
    background-color:#b6ff00;
    }
.large{
          float:left;
          background-color:#00ffff;
      }
.small{
          width:90px;
          height:90px;
          float:right;
          background-color:#ff6a00;
      }
.page{
          color:#4800ff;
      }
/*清浮动方法1：紧跟在最后一格子元素后面加上<div class="clear"></div>*/
.clear{
    /*clear:both;*/
}
/*清浮动方法2：在父容器上定义一个class*/
.over-flow{
    overflow:auto;
}
/*清浮动方法3：在父容器上定义一个class*/
.clearfix:after{
    /*content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    font-size:0;*/
}

    </style>
</head>
<body>
    <div>
        <div class="container clearfix over-flow ">
            <div class="large">
                <table class="table1">
                    <tr>
                        <td>aa</td>
                        <td>bb</td>
                    </tr>
                    <tr>
                        <td>cc</td>
                        <td>dd</td>
                    </tr>
                </table>
            </div>

            <div class="small">
                <table class="table2">
                    <tr>
                        <td>11</td>
                        <td>22</td>
                    </tr>
                    <tr>
                        <td>33</td>
                        <td>44</td>
                    </tr>
                    <tr>
                        <td>55</td>
                        <td>66</td>
                    </tr>
                </table>
            </div>
            <div class="clear"></div>
        </div>
        <div class="page">
            <p>this is designed for css float test </p>
        </div>
    </div>
</body>
</html>

测试浮动

aa	bb
cc	dd

11	22
33	44
55	66

this is designed for css float test

最后的<div class="page">,如果它没有浮动样式，不能放在container 中。需要清浮动的父元素中必须都是包含浮动的子元素