clearfix清除浮动具体位置

很久没用浮动都忘了清除浮动加在哪了。。。
清除浮动的方法当然，有很多，我个人比较喜欢clearfix加after伪类方法。最近做项目遇到了加clearfix无效的情况，我知道肯定是类的位置加错了，由于原 源代码比较多，所以在此举个相似的小例子记录下来。
css如下

<style>
        .A {
            background: skyblue;
        }
        .A1 {
            width: 100px;
            height: 50px;
            background: red;
            float: left;
        }
        .A2 {
            width: 100px;
            height: 50px;
            float: left;
        }
        .B {
            width: 250px;
            height: 250px;
        }
        .clearfix:after {
             visibility: hidden;
             display: block;
             font-size: 0;
             content: "";
             clear: both;
             height: 0;
        }
    </style>

HTML如下

	<div class="A">
        <div class="A1">A的第一个孩子A1</div>
        <div class="A2">A的第二个孩子A2</div>
    </div>
    <div class="B">
        我是B
    </div>

效果如下：

如图，浮动后由于之前的A1和A2都声明向左浮动，就给B留出了一部分剩余空间，
B默认会自动补全，这时再对B声明clear:both就会起作用，它就跑到下面去了。
为直接父元素添加clearfix类之后：

	<div class="A clearfix">
        <div class="A1">A的第一个孩子A1</div>
        <div class="A2">A的第二个孩子A2</div>
    </div>
    <div class="B">
        我是B
    </div>

效果如下：