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

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

方法一: 给浮动元素的父元素添加高度

<div id=”wrap”>

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

    </div>

<style>

        #wrap{

            height:400px;

            background-color: red;

        }

        #inner{

            width:300px;

            height:300px;

            float: left;

            background-color: blue;

        }

    </style>

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

         说明:

                  1.该方法给父元素添加了高度,从而在布局上将当前的#inner元素与后面的浮动元素从布局上分割开来,相当于清除了浮动带来的影响

                  2.优点:简单易懂

                  3.缺点:需要手动设置父元素高度,导致父元素高度无法自适应,维护起来较为麻烦

                  4.此方法建议少用

 


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

java培训 大数据培训 前端培训 UI/UE设计培训

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

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

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

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

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