清除浮动的几种方法.ppt

清除浮动的几种方法.ppt

ID:57567188

大小:693.01 KB

页数:13页

时间:2020-08-27

清除浮动的几种方法.ppt_第1页
清除浮动的几种方法.ppt_第2页
清除浮动的几种方法.ppt_第3页
清除浮动的几种方法.ppt_第4页
清除浮动的几种方法.ppt_第5页
资源描述:

《清除浮动的几种方法.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、CSS清除浮动主讲:王玉刚浮动(float)--是个经典又诡异的一个属性浮动框可以左右移动,直到它的外边缘碰到包含框或另一浮动框的边缘当元素浮动时,它将不再处于普通文档流中,相当于浮在文档之上,不占据空间,但是会缩短行框,产生文字环绕的效果float:rightClear属性如果要为浮动元素留出垂直空间,使其它的元素不在其两侧显示,可以对其周围的元素使用清理属性clear:none

2、left

3、right

4、bothclear参数值说明:none:允许两边都可以有浮动对象both:不允许有浮动对象left: 不允许左边有浮动对象right:不允许右边有浮动

5、对象解决方法清除浮动是每一个web前台设计师必须掌握的机能。1、对父级设置适合CSS高度原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。优点:简单,代码少,容易掌握缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题建议:不推荐使用,只建议高度固定的布局时使用评分:★★☆☆☆2、结尾处加空div标签clear:both原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度优点:简单,代码少,浏览器支持好,不容易出现怪问题缺点:不少初学者不理解

6、原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法评分:★★★☆☆3、父级div定义伪类:after和zoom原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。建议:推荐使用,建议定义公共类,以减少CSS代码。评分:★★★★☆4、父级div定义o

7、verflow:hidden原理:因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。【注意:必须定义width或zoom:1,同时不能定义height】优点:简单,代码少,浏览器支持好缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。建议:推荐没有使用position或对overflow:hidden理解比较深的情况使用。评分:★★★☆☆总结父级设置高度额外标签法利用伪对象after方法父元素添加overflow:hidden作业练习所讲到的清除浮

8、动的方法。思考是否还有其他的方法来消除浮动产生的影响?THANKS!

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。