星空电竞官网

动易模板中心 | 动易技术中心 | 无障碍阅读| 售前技术支持：4008-300-618
目录
目录X

“clear”属性的作用

　解决了CSS中padding这个定义在页面兼容布局的问题后，又发现了的问题：

IE浏览器和GoSuRF Browser浏览器中浏览的效果：


Opera浏览器中浏览的效果（标题顶部缺少间距）：


Mozilla Firefox中浏览的效果（标题、副标题都挤得乱套了）：

　　在Opera观看器中观看的功效中，网站主题顶面少于差距倒也说得回忆过去，每组没引响页面内容功效；Mozilla Firefox中观看的功效中网站主题、副网站主题都挤得乱套了，解释还是有概念老虎（Firefox）中应严格规范概念，主动性查看一下吧。

　　首先看下这里的定义：

#ArticleList h3,
#ArticleList h3 a { /***文章标题定义***/
text-align: left;
font-size: 16px; color: #0055FF;
font-weight: bold;
margin-top: 30px; margin-bottom: 0px;
}
#ArticleList h3 a:hover { /***鼠标在链接上文章标题样式定义***/
font-size: 16px; color: #bb0000; background: #f2f2f2;
}
#ArticleSubheading { /***文章副标题定义***/
font-size: 14px; color: #aaa;
text-align: left; margin-bottom: 10px;
}
#ArticleSubheading2 { /***文章副标题定义***/
font-size: 14px; color: #aaa;
text-align: center; margin-bottom: 10px;
}
#ArticlePic { /***文章缩略图定义***/
float: left; width: 120px;
background: #fff; clear : left;
}
#ArticleIntro { /***文章简介定义***/
float: right; width: 340px;
text-align: left;line-height: 150%;
color: #333;
}
#UpdateTime { /***文章发表时间定义***/
height: 30px; width: 100%;
text-align: right; font-size: 12px; color: #333;
border-bottom: 1px solid #f2f2f2;
}

　　没有用“clear ”这个属性（是否允许两边可以有浮动对象），那先都加上“clear : both;”试试：

#ArticleList h3,
#ArticleList h3 a { /***文章标题定义***/
text-align: left;
font-size: 16px; color: #0055FF;
font-weight: bold;
margin-top: 30px; margin-bottom: 0px;
clear : both;
}
#ArticleList h3 a:hover { /***鼠标在链接上文章标题样式定义***/
font-size: 16px; color: #bb0000; background: #f2f2f2;
}
#ArticleSubheading { /***文章副标题定义***/
font-size: 14px; color: #aaa;
text-align: left; margin-bottom: 10px;
clear : both;
}
#ArticleSubheading2 { /***文章副标题定义***/
font-size: 14px; color: #aaa;
text-align: center; margin-bottom: 10px;
}
#ArticlePic { /***文章缩略图定义***/
float: left; width: 120px;
background: #fff;
clear : left;
}
#ArticleIntro { /***文章简介定义***/
float: right; width: 340px;
text-align: left;line-height: 150%;
color: #333;
}
#UpdateTime { /***文章发表时间定义***/
height: 30px; width: 100%;
text-align: right; font-size: 12px; color: #333;
border-bottom: 1px solid #f2f2f2;
clear : both;
}

　　加上“clear : both;”保存后浏览，OK，都解决了:)

Mozilla Firefox中浏览的效果：

clear属性：
　　clear 属性是定义否允许两边可以有浮动对象的一个属性，它有4个值：
　　none : 　允许两边都可以有浮动对象
　　both : 　不允许有浮动对象
　　left : 　不允许左边有浮动对象
　　right : 　不允许右边有浮动对象

　　要是构成为“clear : both;”则本贮罐中的第二行内不并不能够另外喜欢的人有悬浮喜欢的人；要是构成为“clear : left;”则本贮罐中的下侧不并不能够另外喜欢的人有悬浮喜欢的人。象“#ArticlePic”（预览构成），其构成通常情况下并不能够为“clear : right;”，否则的话照片文字就并不能够改变右3d环绕了。
【打印正文】 推出时段：2006-09-25 19:08:54 浏览次数： 次 作家：雅虎 种类：受美国法律创作者
×

用户登录

var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?90c4d9819bca8c9bf01e7898dd269864"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"K9y7iMpaU8NS42Fm",ck:"K9y7iMpaU8NS42Fm"});