是什么导致我的标题移动？答案

【问题标题】：What's causing my header to move about?是什么导致我的标题移动？
【发布时间】：2012-05-18 21:13:29
【问题描述】：

我正在做一个简单的布局，它需要页眉、页脚和主要内容。但是，有些事情让我有些烦恼。如果我在标题http://www.reversl.net/before/ 下方包含一张图片，那么所有内容都恰好位于我想要的位置。但是，如果我删除图像，我的标题会从页面顶部给自己留出一个边距，如下所示http://www.reversl.net/after/ 我猜它与我的浮动标题有关，并且它的浮动内容没有被清除。但是我已经包含了 clearfix hack，这似乎并没有改变事情。有什么想法吗？

<body>
<div class="header clearfix">
<div id="wrap">
    <div class="wrap-inner">
        <ul id="nav-dash">
            <li><a href="#"><img class="header-avatar" src="http://placehold.it/15x15" width="15px" height="15px" alt="" /> YOU &#9660;</a>
                <ul>
                    <li class="first"><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                    <li><a href="#">four</a></li>
                </ul>
            </li>
        </ul><!--.nav-->
        <div id="logo"><a href="#">LOGO</a></div><!--#logo-->
    </div><!--.wrap-inner-->
</div><!--#wrap-->
</div><!--#header-->

<div class="wrap-inner">
    <h1>Main Content Here...</h1>
</div><!--.wrap-inner-->

<footer>
<div id="wrap">
    <div class="wrap-inner">
        <p>Footer Text Here....</p>
    </div><!--.wrap-inner-->
</div><!--#wrap-->
</footer>
</body>
</html>

【问题讨论】：

标签： css header css-float clearfix

【解决方案1】：

看起来您还没有设置任何基本样式。例如：

H1 {
     font-size:2em;
     margin-top:1em;
     ......
 }

【讨论】：

【解决方案2】：

这是由于主要内容中的H1边距。

.wrap-inner h1 {margin-top:0}

【讨论】：

Cheers Jumancy @luke2012 虽然这确实修复了神秘的页眉边距，但这意味着我无法在 {margin-top:0} 之外的 H1 标签中添加任何边距？

【解决方案3】：

请试试这个

body
    {
    margin:0;
    padding:0;
    }

【讨论】：

【解决方案4】：

嗯，为什么要使用多个 id='wrap' 的项目？

我加了

{
clear:both;
overflow:hidden;
}

到你的主要内容容器（它也是一个“包装”），它似乎工作。

【讨论】：

太棒了！这行得通。我有多个具有相同样式的包装的原因是因为我正在处理一种流体布局，其中外包装为 1280 像素，一些内容（如标题图像）将填满浏览器屏幕，但大部分主要内容将位于 960 像素的包装内我已经调用了 .wrap-inner。希望这是有道理的。
您在解决方案中使用了 clear:both。我在浮动项目（标题）的父 div 中添加了一个 clearfix，这不应该与将 clear:both 添加到主要内容中做同样的事情吗？
我的意思是你不应该使用多个具有相同id的元素，id应该是唯一的w3schools.com/tags/att_standard_id.asp最好使用class来代替。
您没有为“clearfix”类定义任何样式！它不是一个自动修复东西的魔法类：P 你可以在网上找到一些代码示例并将其添加到你的 css 中。
你的权利，我应该使用一个类。菜鸟失误！关于 clearfix，我实际上确实为该类定义了样式。在我的原始文件中，我使用了包含 clearfix 样式的 html5 样板。我减少了上面链接中的标记/样式，以帮助人们找到可能导致与我的标题相关的问题的原因。在混乱中我忘了包括 clearfix 样式:-() 再次感谢。