div CSS 新手布局会遇到布局的背景颜色无法显示, 一般布局背景无法显示通常原因如下:
1, 由使用 float 浮动造成浮动产生无法显示 CSS 背景颜色
2, 高度不够而产生背景无法显示
接下来我们分别介绍无法显示背景颜色或图片的原因和解决方法.
一, CSS float 浮动产生浮动无法显示背景样式颜色
假设对一个对象设置了 background 背景颜色样式, 该对象内部盒子有使用 float 浮动属性样式, 这个时候该对象浮动产生, 导致该对象不能撑开, 所以 CSS 背景颜色就不能无法显示, 解决方法有三种:
(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
1. 设置 clear 清除浮动
- .clear{ clear:both}
- <div class="div">
- <div class="left">left 浮动 </div>
- <div class="right">right 浮动 </div>
- <div class="clear"></div>
- </div>
2. 设置 CSS 高度
- .parent{
- height: 400px;
- }
- <div class="parent"><div>
3. 设置 CSS overflow 样式
- .parent{
- overflow: auto;
- }
- <div class="parent"><div>
二, 高度限制造成了背景颜色不能显示完整
原因分析:
假如你有个对象没有计算好高度 (或无意设置了一个很小高度属性样式), 因为不确定内容有多少, 当内容超过你设置高度限制, 这个时候超出部分背景就可能无法显示.
解决方法:
设置够高的高度, 或取消删除高度样式即可.
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14861.html