码迷,mamicode.com
首页 > 其他好文 > 详细

清除浮动总结

时间:2014-09-25 21:36:47      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:使用   ar   strong   sp   div   on   c   代码   ad   

一、浮动产生的原因

    float属性具有破坏性:子元素设置float:right或float:left导致父级元素高度塌陷。

二、浮动副作用

1、背景不能显示

由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。

2、边框不能撑开

如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

三、css解决浮动,清除浮动的方法

1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动,这里对“.divcss5”设置一定高度即可。
2、clear:both清除浮动(推荐)
为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。
3、父级div定义 overflow:hidden(推荐)
对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

清除浮动总结

标签:使用   ar   strong   sp   div   on   c   代码   ad   

原文地址:http://www.cnblogs.com/eli01/p/3993414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!