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

最后一个DIV模块，仅仅显示字符，其余属性都未显示

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

 <div id="content" style="zoom:1;overflow:hidden">

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

test

头部

xia


```![图片说明](https://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>

 <!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>