Html &引用；明确：两者皆有&引用；不清算浮动div_Html_Css_Layout

Html &引用；明确：两者皆有&引用；不清算浮动div

html css layout

Html &引用；明确：两者皆有&引用；不清算浮动div,html,css,layout,Html,Css,Layout,我有一个问题，我的div.gridContainer（黑色背景）没有用body div扩展，而是用于页脚。据我所知，它应该只是一个简单的修复使用明确：两者；在css3中的空div上 …然而，这似乎不起作用！我已经玩了一场游戏，但似乎无法解决问题。有没有可能有人能告诉我这里发生了什么？（使用铬） ©2014创意深渊。版权所有。这里是社交图标 @仅介质屏幕和（最小宽度：769px）{ .gridContainer{ 宽度：88.2%；最大宽度：1232px；左：0.9%；

我有一个问题，我的div.gridContainer（黑色背景）没有用body div扩展，而是用于页脚。据我所知，它应该只是一个简单的修复使用明确：两者；在css3中的空div上

…然而，这似乎不起作用！我已经玩了一场游戏，但似乎无法解决问题。有没有可能有人能告诉我这里发生了什么？（使用铬）











©2014创意深渊。版权所有。
这里是社交图标
@仅介质屏幕和（最小宽度：769px）{
.gridContainer{
宽度：88.2%；
最大宽度：1232px；
左：0.9%；
右侧填充：0.9%；
保证金：自动；
身高：100%；
}
#航行{
浮动：左；
左边距：0；
宽度：100%；
显示：块；
高度：自动；
填充顶部：20px；
字体系列：“开放式Sans”，无衬线；
字体大小：13px；
字号：200；
}
ulli{
显示：内联；
列表样式类型：无；
左边距：35px；
边缘光：4px；
浮动：对；
颜色：#FFF；
}
ul a{
文本装饰：无；/*无下划线*/
颜色：#FFF；
}
悬停{
文本装饰：下划线；/*无下划线*/
颜色：#FFF；
}
#身体{
左边距：0；
宽度：100%；
显示：块；
高度：50px；
明确：两者皆有；
}
#页脚{
明确：两者皆有；
浮动：左；
左边距：0；
宽度：100%；
显示：块；
垫底：10px；
}
#左脚{
明确：两者皆有；
浮动：左；
左边距：0；
宽度：48.9795%；
显示：块；
字体系列：“源Sans-Pro”，无衬线；
字号：200；
颜色：#FFF；
}
#右脚{
明确：无；
浮动：左；
左缘：2.0408%；
宽度：48.9795%；
显示：块；
}
#试验{
明确：两者皆有；
高度：1px；
}
#卡洛戈{
背景色：#039；
}
}

因此，对于任何感兴趣的人，我都知道发生了什么。。。我愚蠢地使用了“身体”的id，它显然已经存在，并在锅炉板中被玩弄。。。尴尬

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


}