css清除浮动产生的影响

作者: Rememberautumn 分类: 未分类 发布时间: 2015-10-05 15:31 阅读: 2,245

有时候为了构建响应式的页面,我们会使用float属性,如下:

然而使用了float属性会对我们的页面产生影响,比如:

1、背景不能显示

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

2、边框不能撑开

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

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

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

css解决浮动,清除浮动方法

  1. 我们给父DIV设置适当的高度,使用设置高度样式,清除浮动产生,前提是对象内容高度要能确定并能计算好。
  2. 在div2下新增一个DIV并设置样式clear:both,这样就可以将父div撑开。
  3. 给父DIV加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注