清除浮动的几种方法.pptx

会计学1清除浮动的几种方法清除浮动的几种方法float:right第1页/共12页第2页/共12页Clear属性属性n n如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以可以对其周围的元素对其周围的元素使用清理属性使用清理属性clear:none|left|right|bothclear:none|left|right|bothn nclearclear参数值说明：参数值说明：none:none:允许两边都可以有浮动对象允许两边都可以有浮动对象 both:both:不允许有浮动对象不允许有浮动对象 left:left:不允许左边有浮动对象不允许左边有浮动对象 right:right:不允许右边有浮动对象不允许右边有浮动对象第3页/共12页解决方法解决方法解决方法解决方法清除浮动 是每一个 web前台设计师 必须掌握的机能。第4页/共12页1、对父级设置适合、对父级设置适合CSS高度高度n n原理：父级原理：父级divdiv手动定义手动定义heightheight，就解决了父级，就解决了父级divdiv无法自动获取到高度的无法自动获取到高度的问题。问题。n n优点：简单，代码少，容易掌握优点：简单，代码少，容易掌握n n缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级divdiv不一样时，会产生问题不一样时，会产生问题n n建议：不推荐使用，只建议高度固定的布局时使用建议：不推荐使用，只建议高度固定的布局时使用n n评分：评分：第5页/共12页2 2、结尾处加空、结尾处加空、结尾处加空、结尾处加空divdiv标签标签标签标签 clear:both clear:bothn n原理：添加一个空原理：添加一个空divdiv，利用，利用csscss提高的提高的clear:bothclear:both清除浮动，让父级清除浮动，让父级divdiv能自动获取到高度能自动获取到高度n n优点：简单，代码少，浏览器支持好，不容易出现怪问题优点：简单，代码少，浏览器支持好，不容易出现怪问题n n缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空多空divdiv，让人感觉很不爽，让人感觉很不爽n n建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法n n评分：评分：第6页/共12页3 3、父级、父级、父级、父级divdiv定义定义定义定义 伪类伪类伪类伪类:after:after 和和和和 zoomzoomn n原理：原理：IE8IE8以上和非以上和非IEIE浏览器才支持浏览器才支持:after:after，原理和方法，原理和方法2 2有点类似，有点类似，zoom(IEzoom(IE转有属性转有属性)可解决可解决ie6,ie7ie6,ie7浮动问题浮动问题n n优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）用，如：腾迅，网易，新浪等等）n n缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。能让主流浏览器都支持。n n建议：推荐使用，建议定义公共类，以减少建议：推荐使用，建议定义公共类，以减少CSSCSS代码。代码。n n评分：评分：第7页/共12页4 4、父级、父级、父级、父级divdiv定义定义定义定义 overflow:hidden overflow:hiddenn n原理：因为原理：因为overflow:hiddenoverflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用其对象内内容（包括使用floatfloat的的divdiv盒子），从而实现了清除浮动。【盒子），从而实现了清除浮动。【注意：注意：必须定义必须定义widthwidth或或zoom:1zoom:1，同时不能定义，同时不能定义heightheight】n n优点：简单，代码少，浏览器支持好优点：简单，代码少，浏览器支持好n n缺点：不能和缺点：不能和positionposition配合使用，因为超出的尺寸的会被隐藏。配合使用，因为超出的尺寸的会被隐藏。n n建议：推荐没有使用建议：推荐没有使用positionposition或对或对overflow:hiddenoverflow:hidden理解比较深的情况使用。理解比较深的情况使用。n n评分：评分：第8页/共12页总结总结n n父级设置高度父级设置高度n n额外标签法额外标签法n n利用伪对象利用伪对象afterafter方法方法n n父元素添加父元素添加overflow:hiddenoverflow:hidden第9页/共12页作业作业练习所讲到的清除浮动的方法。练习所讲到的清除浮动的方法。思考是否还有其他的方法来消除浮动产生思考是否还有其他的方法来消除浮动产生的影响？的影响？第10页/共12页THANKS!第11页/共12页