清除浮动的几种方法.ppt

《清除浮动的几种方法.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!