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

方法五:使用overflow属性

说到overflow属性,大家第一反应就是将溢出父元素的内容隐藏。

然而我们将它用到浮动元素的父元素上时.你会发现以下情况

    <div id=”wrap”>

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

    </div>

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

    <style>

        #wrap{

            background-color: red;

            overflow:hidden;

        }

        #inner{

            width:300px;

            height:300px;

            float: left;

            background-color: blue;

        }

        #content{

            background-color: gray;

        }

    </style>

前端培训技术

说明:

  1. 出现这种情况的主要原因是因为overflow属性的值如果不为visible (默认值),它将会开启BFC(英文: Block Formatting Context,中文:块级格式化上下文)
  2. 这种方法清除浮动也不错,对元素的影响较小,但是在某些特殊情况下不适用

总结

         清除浮动的核心思路就是想尽办法让浮动元素的父元素有高度,以上五种方法中,主要推荐伪元素隔离法或oveflow属性(该方法视情况而定)

 


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

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

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