易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS中的Clear tsiring的专栏

在当今web2.0时代,在设计网页的时候大家都会使用div+css进行布局,有点就不用多说了,自然有很多好处了,至少会比用table布局少些代码,而用div布局也有他们的不方便之处,就是比较复杂,尤其是多个div在一行显示,多个浏览器兼容等等,所以初学者还是尽量用table布局,待熟练了在用div.
现在说的是DIV+CSS中clear:both的作用,先看下例:
p.f1{float:left;width :100px;}
p.f2{float:left;width :400px;}
<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p >换一行</p>
以上的第三行,会和第一行排在一起,为什么呢,因为当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。
应改为:
如果不用清除浮动,那么第3个<P>的文字就会和第一二行在一起
所以我们在第3个<P>加一个清除浮动。
<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p style="clear:both;">另起一行</p>
这样可以正常显示了.
也可以参考http://www.webjx.com/css/divcss-5014.html


相关文档:

IE6/IE7/FF的CSS hack 浏览器兼容总结

IE6/IE7/FF的CSS hack 浏览器兼容总结
2010-01-23 15:25
由于不同的浏览器对CSS的支持及解析结果不一样,处理的优先级不一样。针对不同的浏览器来写不同的CSS达到在不同浏览器下显示想要的效果就是css hack。先贴两个直观的对比图:
再贴一段代码:
#bgcolor {
background:red !important; /* Firefox 等其他浏览器 * ......

css兼容与差别 IE6,IE7,IE8,FireFox,Opera,Safari

【Web】css兼容与差别 IE6,IE7,IE8,FireFox,Opera,Safari
2010-01-16 18:50
【Web】css兼容与差别 IE6,IE7,IE8,FireFox,Opera,Safari
2010-01-13 11:07
外置
.main{ float:left;#float:none;_float:none;
html*.main{ float:left;#float:none;_float:none; }
*+html .main{ float:left;#float:none;_float:none; } ......

CSS兼容IE6、IE7、火狐(Firefox)技巧集合


 CSS 对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了 一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明。 
 
CSS技巧 
 
1.d ......

IE和Firefox在JS和CSS方面的兼容性

1.document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];
Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:
IE下,可以 ......

CSS经典实用技巧10招


一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里
就不展开描述。
二.明确定义单位,除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单
位,比如:width: 100px width: ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号