设置横断面高度时的css布局问题

Question

我正在用HTML5写一个基本的网站，我有所有的网站结构，到目前为止，一切都运行得很好。

然而，我有一个部分似乎有点自己的问题。

一旦我有了这个部分的高度，这些部分就会移到文章的顶部，位于前两个部分后面，其中部分中的实际内容保持不变。

    <article><section class="welcome-box">
    <section class="welcome-wrapper">

        <div class="welcome-hello">
            <div class="welcome-hellotext">HELLO, WELCOME TO SAA RECRUITMENT </div>
        </div>

        <div class="welcome-line"></div>

        <div class="welcome-textbox">
            <div class="welcome-textboxtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
        </div>

        <div class="welcome-button">
            <div class="welcome-buttontext">READ MORE</div>
        </div>
    </section>
</section>

<section class="home-slider">
    <div class="slider-wrapper">
        <div id="slider">
            <div class="slide1">
                <img src="images/slide_1.jpg" alt="" />
            </div>
            <div class="slide2">
                <img src="images/slide_2.jpg" alt="" />
            </div>
            <div class="slide3">
                <img src="images/slide_3.jpg" alt="" />
            </div>
            <div class="slide4">
                <img src="images/slide_4.jpg" alt="" />
            </div>
        </div>
        <div id="slider-direction-nav"></div>
        <div id="slider-control-nav"></div>
    </div>
</section>
<!-- Slider Script -->
<script type="text/javascript">
    $(document).ready(function() {
        var slider = $('#slider').leanSlider({
            directionNav: '#slider-direction-nav',
            controlNav: '#slider-control-nav'
        });
    });
</script>
 <!-- End Slider Script -->
<section class="about-box">
    <div class="about-boxtitle">TITLE HERE</div>
    <div class="about-boxline"></div>
    <div class="about-boxtext"></div>
</section>

<section class="news-box">
    <div class="news-boxtitle">NEWS</div>
    <div class="news-boxline"></div>
    <div class="news-boxtext"></div>
</section>

<section class="clients-box">
    <div class="clients-boxtitle">CLIENTS</div>
    <div class="clients">client</div>
    <div class="clients">client</div>
    <div class="clients">client</div>        
</section>   

    </article>

我遇到麻烦的部分是具有“clients box”类的部分(最后一部分)。

下面是CSS：

.clients-box {
        width: 960px;
        margin-top: 10px;
        background-color: #FFF;
    }

    ul.clients {
        width: 940px;
        height: 40px;
        margin: 0 auto 0;
    }

    ul.clients li.client {
        width: 150px;
        height: 40px;
        display: inline-block;
        background-color: #039;
        clear: both;

该网站的实况如下：http://dev.saarecruitment.com/

Answer 1

.clients-box需要float: left或float: right。您可以添加margin: 10px auto，使其居中，顶部/底部边距为10px。

Answer 2

您已经在上面的所有<sections>上使用了float，这意味着它们没有占用空间。因此，这个盒子到达了顶部，在浮动的元素下面。

最简单的方法是将float: left也应用于此框。

另一种受@ Alien先生启发的方法是将clear:left应用于此块。