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

这学期开始学习我导师主讲的《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 代表清除前后浮动,也就是将伪类所在位置的前后浮动都清除掉,将这些熊孩子的“硬翅膀”捆起来。

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

这里写图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页