css 浮动问题 - 明确：两者都有差距

Question

我需要从左边开始的固定宽度（260 像素）的菜单 div。然后内容 div 具有相对宽度（整个宽度 - 除了菜单 div），其中将是一个始终位于内容 div 中心的容器（margin：auto）

这是我的css

#site-content{
    margin:25px 0 0 260px;
}
.site-content{
    width:740px;
    margin:auto;
}
#site-menu{
    float:left;
    width: 260px;
    padding: 20px 0;
    overflow:hidden;
}

一切似乎都还好，但浮动有问题。当我在 .site-content 2 div 中设置（浮动）然后使用 clear:both 来清除浮动，有很大的差距，其他元素在菜单结束后下降。你能给我解决办法吗？ （抱歉英语不好）

HTML

<div id="site-menu">
        <ul>
            <li class="menu"><a id="menu-glxavor" class="menu" href="/"></a></li>
            <li class="menu"><a id="menu-mermasin" class="menu" href="/arm/about-us"></a></li>
            <li class="menu"><a id="menu-usucich" class="menu" href="/arm/for-teachers"></a>
            <ul id="menu-usucich-sub">
                <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/teacher-schedule">Դասացուցակ</a></li>
                <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/homeroom-teachers">Դասղեկներ</a></li>
                <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/exemplary-lessons">Օրինակելի դասեր</a></li>
                <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/teacher-training">Վերապատրաստում</a></li>
            </ul>
            </li>
            <li class="menu"><a id="menu-ashakert" class="menu" href="/arm/for-pupils"></a></li>
            <li class="menu"><a id="menu-shrjanavartner" class="menu" href="/arm/graduates"></a></li>       
            <li class="menu"><a id="menu-norutyunner" class="menu" href="/arm/news"></a></li>
            <li class="menu"><a id="menu-mankapartez" class="menu" href="/arm/kindergarten"></a></li>
            <li class="menu"><a id="menu-nyuter" class="menu" href="/arm/materials"></a></li>
            <li class="menu"><a id="menu-bajanortagrvel" class="menu" href=""></a></li>
            <div id="subscribe">
                    <input type="text" id="subscribe-name" placeholder="email" name="subscribe-name" />
                    <button class="large awesome blue" id="sub-button" type="submit">բաժանորդագրվել</button>
                    <div id="sub-notification"></div>
                </div>
        </ul>
        </div>
        <div id="site-content">
        <div class="site-content">
            <div class="pages-content-top"></div>
            <div class="pages-content-center">
            <h2>Համագործակցություն 1</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=37'>Ավելին...</a></span></div><div style='clear:both'></div>


                <h2>Համագործակցություն 2</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=38'>Ավելին...</a></span></div><div style='clear:both'></div>


                <h2>Համագործակցություն 3</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=39'>Ավելին...</a></span></div><div style='clear:both'></div>
            </div>
            <div class="pages-content-fot"></div>
        </div>
        </div>

Answer 1

你应该让.site-content 建立new block formatting context，以便它里面的clear 只影响它里面的浮动，而不影响它外面的浮动。最合适的选项似乎是overflow: hidden 和display: table（因为宽度是固定的，布局不会因为display 的变化而改变）。

Answer 2

木马是对的... 我删除了浮动属性 并且在 CSS 中使用宽度自动作为站点内容，因为您已经声明它不固定.. 我不知道这是否是你想要的，但看看这个小提琴 WORKING FIDDLE

CSS

  h2{
margin:0;
}

编辑：好的，我相信你的问题出在网站内容部分。第一个段落的结尾和第二个标题之间有很大的差距。至少这是我所理解的，当我在this 之类的小提琴中运行您的代码时，这就是您的代码所显示的内容。

我刚刚从您的代码中删除了一行。即第 46 行

  <div style='clear:both'></div>

现在第一段和第二段之间没有间隙。理想情况下，您应该使用“clear:both”属性，因为右侧有一个菜单。因此，如果您使用“clear:both”属性，则 div 会自动向下对齐，因为它会在右侧找到菜单。 希望你明白我的意思。检查此example。在这里，您将看到两个段落之间的差距是由于“clear:both”属性造成的。删除它，差距就消失了。

FINAL Solution你的问题（我希望）。