管好调皮的熊孩子——通过伪类清除浮动

这学期开始学习我导师主讲的《WEB程序设计》，自己以前做PHP的时候也算是写了很多前段代码，但都是抱着使用的目的去学的，没有系统学习，借着这学期的课，也对这种学习陋习留下的漏洞补补窟窿，做做笔记。

在样式中使用浮动属性的时候常常会想要做这样类似的布局：

根据上面的效果图，很容易就可以写出这样的div布局：

    <div class="father">
        <div class="title"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="footer"></div>
    </div>

一个父容器father包裹着所有的内容，里面用各个div分割出了不同的区域，就像一位坚毅的父亲用坚实的臂膀保护着一家人。

但往往我们写着写着就成了这样：

可怜的父容器再也管不住两个翅膀硬了（添加了float属性）的熊孩子（left和right），它宽大的臂膀（border）再也无法将他们拥入怀抱了。

遇到熊孩子怎么办？一般上了学的熊孩子都会害怕老师的，我们就给它们找个老师来管好他们。

接下来就是我们的老师——伪类登场了。

要使用伪类，我们得将我们的div结构做一点修改：

    <div class="father">
        <div class="title"></div>
        <div class="clear  f-cb">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>

可以看到我们在这两个熊孩子（left和right）外面包裹了一个教室（clear），同时在class中加入了另外一个类f-cb，就是我们所说的伪类啦，我们就是要请这位老师来管好这两个调皮的小东西。

        .f-cb:after {
            content:".";
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
        }

伪类的写法很简单，第一行的content属性中的“.”是用来占位的，因为我们的两个跑出来的熊孩子是块元素，因此需要将这个“.”也换成块元素，打败敌人的最好手段就是先混入敌人。接着将高设为0，并设置超过可是区时将超出的部分隐藏。最后的是最重要的，clear:both 代表清除前后浮动，也就是将伪类所在位置的前后浮动都清除掉，将这些熊孩子的“硬翅膀”捆起来。

好了，再运行试试，孩子终于听话了。