现在位置:首页 » 代码修改 »

关于CSS中使用clear:both的一点启示

心岛发布于2014年05月22日  分类: 代码修改  浏览:3459 人次  评论:0 

QQ截图20140522230751.jpg

我们习惯了CSS2.0,习惯了在网页布局中使用DIV+CSS,习惯了使用FLOST属性实现模块的移动布局,也习惯了使用如下格式来清除浮动:


<style>
.right="height:20px;float:right;"
.left="height:20px;float:left;"
.clear="clear:both;"
</style>
<div>
<p class="right">sdfdfsf</p>
<p class="left">sdfdfsf</p>
<p class="clear"></p>
</div>

但是今天,我发现我的网页在360浏览器和谷歌浏览器中突然失去了清除浮动属性,因此,我将所有的class="clear"修改为了id="clear",这样一切正常了,这就说明这种方式在样式表的处理上有问题,可能是某些js中对这些属性进行了屏蔽或者有所冲突,但是不管怎么样,为了不再出现类似状况,建议大家该改一下这个习惯了,我的方法也只是一种权宜之计,最好的办法就是直接将属性改成别的,那样应该出现问题的几率会小很多!

2014-05-22

今天,5月29日,因博客升级出现问题而求助明月兄弟,他告诉我说此方法是不对的,大意是:同一个页面id应该是唯一的,虽然有时候表面没问题,但是是不正确的用法class是可以多次使用的,id同一个页面最好唯一。经过我们一起查找终于找到了问题所在,在原来的CSS文件中,.clear的上一行有个注释形式如://就是这样的样式,本来我认为是没有问题的,但是当我将此注释形式换为/*就是这样的形式*/后竟然让.class实现了它的效果!这充分说明了一点,有时候注释符也可以让你吃大亏!

本文由心岛原创或编辑,转载请保留链接【关于CSS中使用clear:both的一点启示】http://www.liangxin.name/?post=556
本文标签: Css兼容 代码修改 网站建设 技巧
上一篇: 关于心岛博客页面微调的说明
下一篇:[收藏]emlog评论头像缓存PHP代码
目前有 0 条评论