Question

我有一个问题，我的div .gridContainer（黑色背景）不是用body div扩展，而是用于页脚。据我所知，它只是一个简单的修复使用clear：both;在css3上的空div。

......但是这似乎不起作用！我有一个游戏，但似乎无法想象这个问题，有人可以告诉我这里发生了什么？（使用铬）。

Website issue

<body>

<div class="gridContainer clearfix">
        <div id="navigation">
            <nav>
              <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">PORTFOLIO</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">VIDEOS</a></li>
                <li><a href="#">PHOTOGRAPHY</a></li>
                <li><a href="#">CONTACT</a></li>
              </ul>
            </nav>
        </div>
        <div id="body">
            <div id="CALogo"><img src="Images/CALogoLarge.png" alt="CreativeAbyss"></div>
        </div>
        <div id="footer">
            <div id="FooterLeft">©2014 Creative Abyss. All Rights Reserved.</div>
            <div id="FooterRight">Social Icons Here     </div>
            <div id="test"></div>
        </div>
        <div id="test"></div>
</div>
</body>



@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
    height: 100%;
}

#navigation {
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height: auto;
    padding-top:20px;
    font-family: 'Open Sans', sans-serif;
    font-size:13px;
    font-weight:200;
}
ul li {
    display: inline;
    list-style-type: none;
    margin-left: 35px;
    marginright: 4px;
    float:right;
    color:#FFF;
}
ul a {
    text-decoration: none; /* no underline */
    color:#FFF;
}
ul a:hover{
    text-decoration:underline; /* no underline */
    color:#FFF;
}
#body {
    margin-left: 0;
    width: 100%;
    display: block;
    height: 50px;
    clear:both;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    padding-bottom:10px;
}
#FooterLeft {
    clear: both;
    float: left;
    margin-left: 0;
    width: 48.9795%;
    display: block;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:200;
    color:#FFF;
}
#FooterRight {
    clear: none;
    float: left;
    margin-left: 2.0408%;
    width: 48.9795%;
    display: block;
}
#test{
    clear:both;
    height:1px;
}

#CALogo {
    background-color:#039;
}


}

Answer 1

所以对于任何有兴趣的人，我都知道发生了什么......我愚蠢地使用了“身体”的身份，这显然已经存在，并且正在锅炉板上玩弄......令人尴尬。

＆＃34;清除：这两种;＆＃34;没有清除漂浮的div

1 个答案: