前端培训清除浮动造成的影响方法四

方法四:使用伪元素隔离法(内墙元素隔离法的升级版)

内墙法效果十分不错,但是对于广大程序猿们来说,能少动手的坚决不多动一下,然而在使用内墙法的时候,我们还要特地去写一个元素来清除浮动,这样对于我们这些高贵的程序猿来说,那是不可能的。

于是CSS中有伪元素这个概念,我们可以借助before和after这两个伪元素来实现内墙法的升级版本。

 

    <div id=”wrap”>

        <div id=”inner”></div>

    </div>

    <div id=”content”>123</div>

    <style>

        #wrap{

            background-color: red;

        }

        #inner{

            width:300px;

            height:300px;

            float: left;

            background-color: blue;

        }

        #content{

            background-color: gray;

        }

    </style>

 

 

我们这时候给#wrap元素和#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示

    <div id=”wrap”>

        <div id=”inner”></div>

    </div>

    <div id=”content”>123</div>

    <style>

        #wrap{

            background-color: red;

        }

        #inner{

            width:300px;

            height:300px;

            float: left;

            background-color: blue;

        }

        #wrap::after{

            content:””;

            display:block;

            clear:both;

        }

        #content{

            background-color: gray;

        }

    </style>

说明:

  1. 利用该方法能完美的解决浮动的负作用
  2. 对于部分垃圾浏览器不兼容伪元素的情况(你懂得是哪些),那就把伪元素的两个冒号改成一个冒号即可

上一篇:
下一篇:
关于我们
名师团队
新闻动态
合作企业
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)