电脑桌面
添加小米粒文库到电脑桌面
安装后可以在桌面快捷访问

网站巧用clearbothVIP免费

网站巧用clearboth_第1页
网站巧用clearboth_第2页
网站巧用clearboth_第3页
巧用clear:both我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况,明明布局正确,但是整个画面却混乱起来了,有时候在IE6下看的很正常的,到ie7或者火狐下看时,就一片混乱了,无论怎么计算,就是不能将排版改正过来。其实,这一切都是浮动搞得鬼,也就是css中的float,要解决情况,就需要使用clear:both了。CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。程序代码:这个是第1列,

这个是第2列,

这个是第3列。

如果不用清除浮动,那么第3列文字就会和第1、2列文字在一起,所以我们在第3个这列加一个清除浮动clear:both;通常,我们往往会将“清除浮动”单独定义一个CSS样式,如:程序代码.clear{clear:both;}然后使用
来专门进行“清除浮动”。不过也有不赞同意见是,
可以不写,直接在下层清除就可以了。比如本来好好的程序代码这个是第1列,

这个是第2列,

这个是第3列。

非要整成程序代码这个是第1列,

这个是第2列,

这个是第3列。

这点看来,
确实不需要写。不过很显然,我们在网页设计时还有一种很普遍的情况:程序代码#main{background-color:#3399CC;width:600px;padding:20px;}#sidebar{background-color:#FF6600;float:left;width:130px;}#container{float:right;width:420px;background-color:#FFFF33;}第一段内容第一段内容第一段内容
第二段内容第二段内容第二段内容
第三段内容

该页面测试在IE下效果正合所要:蓝色块内部有红色和黄色两个色块内容,同时在蓝色块以下是第三段文本。不过FF的效果可不是这样的。我们不能单单想在下一层清除就能完成我们的工作,我们必须在浮动元素所在标签闭合之前及时进行“清除”。程序代码#main{background-color:#3399CC;width:600px;padding:20px;}#sidebar{background-color:#FF6600;float:left;width:130px;}#container{float:right;width:420px;background-color:#FFFF33;}.clear{clear:both;}第一段内容第一段内容第一段内容
第二段内容第二段内容第二段内容

第三段内容

对于因多加的标签会引起IE和FF高度变化,通过如下方法解决:程序代码clear{clear:both;height:1px;margin-top:-1px;overflow:hidden;}程序代码#main{background-color:#3399CC;width:600px;padding:20px;}#sidebar{background-color:#FF6600;float:left;width:130px;}#container{float:right;width:420px;background-color:#FFFF33;}.clear{clear:both;height:1px;margin-top:-1px;overflow:hidden;}第一段内容第一段内容第一段内容第二段内容第二段内容第二段内容

第三段内容

PS:我的淘宝店铺新开业,经营各种桌游,棋牌,希望大伙儿能来看看!http://201314yes.taobao.com/分类:css标签:clear:bothCSS清除浮动常用方法小结CSSclearboth{overflow:auto;zoom:1;}Postedon2012-05-1912:19沁园春阅读(1468)评论(0)编辑收藏常用的清除浮动的方...

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。

碎片内容

精品文档+ 关注
实名认证
内容提供者

中小学学习资料大全

确认删除?