2 gotobat gotobat 于 2017.01.15 13:50 提问

为何我的DIV模块显示不出颜色

![图片说明](http://img.ask.csdn.net/upload/201701/15/1484459411_881740.jpg)图片说明
最后一个DIV模块,仅仅显示字符,其余属性都未显示

5个回答

showbo
showbo   Ds   Rxr 2017.01.15 14:37
已采纳

content要清除浮动,要不后续的div会顶上去了

 <div id="content" style="zoom:1;overflow:hidden">
gotobat
gotobat   2017.01.15 13:47

图片说明

Andone_hsx
Andone_hsx   2017.01.15 17:21

原因:很简单!当 id =“content”的div里面的三个div(也就是id为content的div的子元素)浮动,其元素没有高度,最后一个div向前占位,
不过被浮动的三div给挡住了。解决这种情况的方法有很多种
方法1:你可以在id为content的div的最后一个子元素后面加一个空子元素;
<!doctype html>



test


头部





<!-- 增加空子元素 -->


xia



```![图片说明](http://img.ask.csdn.net/upload/201701/15/1484471614_448616.png)


方法2:给id为content的div加上overflow:hidden;
<!doctype html>
<html>
     <head>
            <meta charset="UTF-8">
            <title>test</title>
     </head>
     <body>
        <div style="background:blue;height:100px;">头部</div>
        <div id="content" style="overflow:hidden;">
            <div style="width:33%;height:250px;float:right;background:green;"></div>
            <div style="width:33%;height:250px;float:left;background:red;"></div>
            <div style="width:33%;height:250px;float:left;background:black;"></div>
        </div>
        <div style="background:red;height:250px;">xia</div>
     </body>
</html>




方法3:使用伪元素选择器:after
<!doctype html>
<html>
     <head>
            <meta charset="UTF-8">
            <title>test</title>
            <style>
                .clear:after{
                    content:"";
                    display:block;
                    clear:both;
                }
            </style>
     </head>
     <body>
        <div style="background:blue;height:100px;">头部</div>
        <div id="content" class="clear">
            <div style="width:33%;height:250px;float:right;background:green;"></div>
            <div style="width:33%;height:250px;float:left;background:red;"></div>
            <div style="width:33%;height:250px;float:left;background:black;"></div>
        </div>
        <div style="background:red;height:250px;">xia</div>
     </body>
</html>





Andone_hsx
Andone_hsx   2017.01.15 17:24

方法1:你可以在id为content的div的最后一个子元素后面加一个空子元素;
<!doctype html>



test


头部





<!-- 增加空子元素 -->


xia



Andone_hsx
Andone_hsx   2017.01.15 17:25
 <!doctype html>
<html>
     <head>
            <meta charset="UTF-8">
            <title>test</title>
     </head>
     <body>
        <div style="background:blue;height:100px;">头部</div>
        <div id="content">
            <div style="width:33%;height:250px;float:right;background:green;"></div>
            <div style="width:33%;height:250px;float:left;background:red;"></div>
            <div style="width:33%;height:250px;float:left;background:black;"></div>
            <!-- 增加空子元素 -->
            <div style="clear:both;"></div>
        </div>
        <div style="background:red;height:250px;">xia</div>
     </body>
</html>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!