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

发布时间:2020年01月14日作者:atguigu浏览次数:742

方法三:使用内墙元素隔离法

在方法二的结尾我们说了,额外增加了一个元素,影响了整体的结构     

         那么,我们就干脆把这堵”墙”放在#wrap元素内部

    <div id=”wrap”>

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

        <div id=”wrap2″>”内墙”</div>

    </div>

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

    <style>

        #wrap{

            background-color: red;

        }

        #inner{

            width:300px;

            height:300px;

            float: left;

            background-color: blue;

        }

        #wrap2{

            height: 50px;

            background-color: yellow;

            clear:both;

        }

        #content{

            background-color: gray;

        }

    </style>

 

 

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

<div id=”wrap”>

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

    </div>

    <div id=”wrap2″>”外墙”</div>

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

<style>

        #wrap{

            background-color: red;

        }

        #inner{

            width:300px;

            height:300px;

            float: left;

            background-color: blue;

        }

        #wrap2{

            height: 50px;

            background-color: yellow;

            clear:both;

        }

        #content{

            background-color: gray;

        }

    </style>

前端培训技术

说明:

  1. 在我们把”墙”放到#wrap元素中,出现了神奇的效果,#wrap元素居然有高度了
  2. 原因就是#wrap2元素被固定在浮动元素的下面, #wrap元素想要包含住这个新的<div>则必须自己有高度才行, 然后他就自己有了高度

         3.缺点:

(1)额外增加了一个元素,影响整体结构

(2)在相当长的一段时间内, 这个方法是各大公司常用的手段


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

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

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

武汉市东湖高新开发区东湖网谷(武汉校区)

西安市雁塔区和发智能大厦B座3层(西安校区)

成都市成华区北辰星拱青创园综合楼3层(成都校区)