DIV+CSS布局中无法显示背景颜色是怎么回事
更新时间：2016年9月14日 14:19 点击：2032
在我还是div+css布局菜鸟的时候，经常会遇到的设置的div背景颜色无法显示，后来才发现是float影响的，现在我把这个问题整理出来，希望给新手参考。
div css新手布局会遇到布局的背景颜色无法显示，一般布局背景无法显示通常原因如下：
1、由使用float浮动造成浮动产生无法显示css背景颜色
2、高度不够而产生背景无法显示
接下来我们分别介绍无法显示背景颜色或图片的原因和解决方法。
一、css float浮动产生浮动无法显示背景样式颜色
假设对一个对象设置了background背景颜色样式，该对象内部盒子有使用float浮动属性样式，这个时候该对象浮动产生，导致该对象不能撑开，所以css背景颜色就不能无法显示，解决方法有三种，一个是设置clear清除浮动、设置css高度、设置css overflow样式。
详细教程可进入：css清除浮动
二、高度限制造成了背景颜色不能显示完整
原因分析：
假如你有个对象没有计算好高度（或无意设置了一个很小高度属性样式），因为不确定内容有多少，当内容超过你设置高度限制，这个时候超出部分背景就可能无法显示。
解决方法：
设置够高的高度，或取消删除高度样式即可。
相关文章
- 这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-05
- 这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了jQuery获得字体颜色16位码的方法,涉及jQuery样式操作及正则表达式使用技巧,非常简单实用,需要的朋友可以参考下...2016-02-23
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
- 想在网页中动态地显示当前系统的时间，找了好多，不过都是一些停在那里不动的。。。不过皇天不负有心人，终于让我找到了...2020-06-25
- 这篇文章主要为大家详细介绍了JavaScript实现颜色查看器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-13
- 这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
安卓利用按钮Button更改的字体大小、字体颜色、背景颜色代码
本文章来介绍在android开发中，我们通过button按钮来动态改变字体大小、字体颜色、背景颜色代码，有需要了解的朋友可参考参考。 实现的逻辑：通过遍历View的方式，判断Vi...2016-09-20- 这篇文章主要介绍了js中flexible.js实现淘宝弹性布局方案,需要的朋友可以参考下...2015-12-25
- 这篇文章主要介绍了C#实现动态显示及动态移除图片方法,对于C#的初学者了解图像操作有一定的帮助,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了解决druid监控页面SQL不显示的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-06-19
- 这篇文章主要为大家详细介绍了JavaScript实现鼠标经过表格行给出颜色标识，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-12
- 这篇文章主要介绍了PyCharm设置注释字体颜色以及是否倾斜的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-16
- 这篇文章主要介绍了javascript点击按钮实现隐藏显示切换效果，以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能，感兴趣的小伙伴们可以参考一下...2016-02-05
在echarts中图例legend和坐标系grid实现左右布局实例
这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17- 这篇文章主要介绍了R ggplot2 修改默认颜色的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
- Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。本教程我们来学习一下Flex布局的基本语法知识及运用实例。 网页布局(layout)是CSS的一...2016-09-14
- 这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09
- 最近要做个网页图片批量下载工具，然后需要一个页面显示网页上的所有图片供用户勾选，再根据勾选的内容来下载指定图片，其中就涉及到要到同时显示多张图片，本文就来介绍一下...2021-06-11
- 这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下...2016-02-01