clearfix的用法

.out{border:5px solid #F00; width:500px;}
.inner1{width:200px; height:200px; float:left; border:1px solid #00F;}
.inner2{width:200px; height:200px; float:left; border:1px solid #0F0;}

<div class="out">
<div class="inner1">123</div>
<div class="inner2">456</div>
</div>

这样写出来的代码.out是不能被撑开。

①.clearfix::after {       /*“clearfix”的元素内最后面加入内容；*/

    content: ".";       /*内容为“.”就是一个英文的句号而已。也可以不写。*/
    display: block;     /*加入的这个元素转换为块级元素。*/
    clear: both;        /*清除左右两边浮动。*/
    visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已；*/
    height: 0;          /*高度为0；*/
    font-size:0;        /*字体大小为0；*/

    }

②加一个

<div style="  clear:both"></div>