CSS入门中，下面一个案例为什么要用“伪元素法”清除浮动？

<section class="w">

    <header class="h">header</header>

    <nav class="h">nav</nav>

    <section class="clearfix">

        <aside>aside</aside>

        <article>article</article>

    </section>

    <footer class="h">footer</footer>

</section>

.w {

    margin: 0 auto;

    width: 1200px;

}

.h {

    height: 60px;

    line-height: 60px;

}

.clearfix:after {

    content:"";

    display: block;

    height: 0;

    clear: both;

    visibility:hidden;

}

/* 并集选择器，统一设置 */

header,nav,aside,article,footer {

    background-color: orange;

    margin: 10px;

    text-align: center;

    border-radius: 3px;

    font-size: 20px;

    font-weight: 700;

    color: #333;

}

aside {

    float: left;

    width: 200px;

    height: 600px;

}

article {

    float: left;

    width: 960px;

    height: 600px;

}