首页 > web前端 > html教程 > css中清除浮动_html/css_WEB-ITnose

css中清除浮动_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:54:51
原创
1020 人浏览过

(1)使用空标签清除浮动

这是目前最常用的一种清除浮动的方法。空标签可以是div标签,也可以是P标签。其实理论上可以是任何标签。这种方法是在需要清除浮动的父级元素内部的最后添加一个清除浮动的空标签,其CSS代码:clear:both。此方法简洁明了,方便实用,但其弊端也很明显,就是增加了无意义的结构元素。此外,有一种与此相似的方法,
也可以实现同样的效果。

(2)使用after伪对象清除浮动

各浏览器均支持after伪对象,所以after应该是适用的,不存在兼容问题。其CSS代码:#layout:after{ display:block; clear:both; content:""; visibility:hidden; height:0;}。使用中需注意:1、该方法中必须为需要清除浮动元素的伪对象设置height:0,否则该元素会比实际高出若干像素;2、content属性是必须的,但其值可以为空。此方法实用有效,且不用添加无意义的标签,但CSS代码较复杂,不够简洁明了。

(3)使用overflow属性

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto;其目的是让高度自适应,zoom:1;是为了兼容IE6(zoom不符合W3C标准),也可以用height:1%;的方式来解决。

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板