div没有设置高度时背景颜色不显示(浮动)

  在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常。但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题。网上查找资料之后主要原因如下:由于在Firefox和opera中:如果里面的DIV是浮动的(float)而母体不会去计算子体float之后的height。而在 IE中支持这种计算,所以IE下正常。

解决方法:
给外部div直接设置高度(不推荐),因为很多时候我们并不知道外部div的高度,我们希望靠里面的div来根据内容自动抻开外边的div,除非你确定的知道外部的div的高度的情况下,所以不建议使用这种方法。
方法一:
在内部每个div后加一个清除浮动(推荐),这样firefox和opera就把里面不当成浮动,会自动计算内部div高度
<div class="outer">

<div class="inner1"></div>
  <div class="inner2"></div>
  <div style="clear:both;"></div>
</div>
方法二:
在.outer中加一句overflow:hidden;
overflow 属性规定当内容溢出元素框时发生的事情。如果外层设置了高度,并且高度小于内层占的实际高度,则内层一部分内容会被隐藏。

主要想强调的一点是,前面中提到的IE中能够正常显示仅限ie6,在之后的版本中同样也无法设置显示背景颜色

上面的示例中必须给子元素其中之一添加高度,不然还是无法正常显示背景颜色。实际测试时宽度为0,但父元素的背景颜色可以正常显示。示例代码:

<!doctype html>
<html>
    <head>
        <title>多列浮动</title>
        <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
        <style type="text/css" media="screen">
            body{
                margin:0;
                padding:0;
                text-align:center;
            }

#menu{
                width:800px;
                margin:0 auto;
                text-align:left;
                background:#ccc;
            }
            #menu ul{
                float:left;
                margin:0px;
                padding:0px;
                list-style:none;
            }
            #menu ul li{
                float:left;
                width:99px;
                display:block;
                line-height:30px;
                text-align:center;
            }
            #menu .menudiv{
                float:left;
                width:1px;
                height:20px;
                background:#888;
                margin-top:5px;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li><a href="#">菜单一</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单二</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单三</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单四</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单五</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单六</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单七</a></li>
                <li class="menudiv"/>
                <li><a href="#">菜单八</a></li>
                <li class="menudiv"/>
            </ul>
        </div>
    </body>
</html>

里面id为menu的元素虽然定义了背景颜色,但是由于子元素都设置了float属性,所以无法正常显示背景颜色。

解决方法一:给menu加上overflow:hidden;

解决方法二:直接在menu内ul外面添加<div style="clear:both;"></div> 就是说添加清除浮动的子元素即可

参考资料:http://lovephpor.blog.51cto.com/1850499/563540

时间: 2024-10-18 02:22:27

div没有设置高度时背景颜色不显示(浮动)的相关文章

鼠标经过时背景颜色变化

<style type="text/css">#coolmenu{border: 1px solid black;border-bottom-width: 0;width: 170px;background-color: #E6E6E6;}* html #coolmenu{width: 164px;}#coolmenu a{font: bold 13px Verdana;padding: 2px;padding-left: 4px;display: block;width:

设置 tableview 的背景 颜色 和清空

表示图中Cell默认是不透明的,那么在设置表示图的背景颜色和图片时通常是看不到的 1.给tableView设置背景view UIImageView *backImageView=[[UIImageViewalloc]initWithFrame:self.view.bounds]; [backImageView setImage:[UIImage imageNamed:@"liaotianbeijing"]]; self.tableView.backgroundView=backImag

linux BASH shell下设置字体及背景颜色

BASH shell下设置字体及背景颜色 echo -e "\e[31mtest\e[41m" \e[30m 将字符的显示颜色改为黑色 \e[31m 将字符的显示颜色改为红色 \e[32m 将字符的显示颜色改为绿色 \e[33m 将字符的显示颜色改为淡红色 \e[34m 将字符的显示颜色改为蓝色 \e[35m 将字符的显示颜色改为紫色 \e[36m 将字符的显示颜色改为淡蓝色 \e[37m 将字符的显示颜色改为灰色 \e[40m -- \e[47m 设置背景色 \e[40m 将背景色设

android在代码中四种设置控件背景颜色的方法(包括RGB)

转载请注明出处: http://blog.csdn.net/fth826595345/article/details/9208771  TextView tText=(TextView) findViewById(R.id.textv_name); //第1种: tText.setTextColor(android.graphics.Color.RED);//系统自带的颜色类 // 第2种: tText.setTextColor(0xffff00ff);//0xffff00ff是int类型的数据

设置Delphi IDE背景颜色为全黑色,类似VS2017 深色

使用Delphi IDE Colorizer 设置Delphi IDE背景颜色.效果如下 插件下载地址 http://download.csdn.net/detail/liangchua/9673553

用图片来设置View的背景颜色(结合Quartz2D)

         UIImage *oldImage = [UIImage imageNamed:@"car"];          //旧图片的尺寸和View不匹配,使用Quartz2D生成新图片     UIGraphicsBeginImageContextWithOptions(self.view.frame.size, NO, 0.0);     [oldImage drawInRect:self.view.bounds];     UIImage *newImage = UI

iOS 设置状态栏的背景颜色

设置状态栏的背景颜色 - (void)setStatusBarBackgroundColor:(UIColor *)color { UIView *statusBar = [[[UIApplication sharedApplication] valueForKey:@"statusBarWindow"] valueForKey:@"statusBar"]; if ([statusBar respondsToSelector:@selector(setBackgro

为每一个table单元格设置不同的背景颜色

为每一个table单元格设置不同的背景颜色: 本章节介绍一下如何给表格的每一个单元格设置一个背景颜色,当然这里的方法比较笨拙,主要面向初学者. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit

【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果

:hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮 CSS部分: #top_search { background-color: #24890D; border: 16px solid #24890D; width: 16px; height: 16px; float: right; } HTML部分: <div id="top_search"> <img src="