html - css float 问题 - 清除 :both gap

Question

我需要从左边开始的菜单 div，宽度固定(260 像素)。然后 Content 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;
}

一切似乎都很好，但是 float 有问题。当我设置 .site-content 2 div( float )然后使用 clear:both 清除 float 时，有很大的差距，其他元素在菜单结束后下降。你能给我解决方案吗？ (抱歉英语不好)

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 只影响它内部的 float ，而不影响它之外的那些。最合适的选项似乎是 overflow: hidden 和 display: table (因为宽度是固定的，布局不会因为 display 更改)。