“清除：两者；”不清除浮动的 div答案

【问题标题】："Clear:Both;" not clearing floated divs“清除：两者；”不清除浮动的 div
【发布时间】：2014-03-23 08:08:29
【问题描述】：

我有一个问题，即我的 div .gridContainer（黑色背景）没有随主体 div 扩展，而是用于页脚。据我所知，这应该只是使用 clear:both; 的简单修复。在空 div 上的 css3 中。

...但是这似乎不起作用！我玩过，但似乎无法解决这个问题，有人能告诉我这里发生了什么吗？（使用铬）。

<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;
}


}

【问题讨论】：

标签： html css layout

【解决方案1】：

所以对于任何感兴趣的人，我都知道发生了什么...我愚蠢地使用了“body”的 id，它显然已经存在并且在样板中被玩弄...令人尴尬。

【讨论】：