Question

我正在尝试使用html和css创建一个简单的信息网站，并使用960网格，因为该网站将具有圆柱结构。

当我将标题h1向左浮动（其中包含徽标的图像，我使用css添加图像作为背景）和右侧的导航列表时，它下面的所有内容都会浮动并在使用溢出后：隐藏，它不清除浮动。我已经尝试了960网格的明确修复类，也是明确的：两者。但他们也没有工作。

所以请告诉我我做错了什么。

这是css

    /**** =header ****/
header {
    overflow: hidden;
}

header h1 {
    background: url(../img/logo.png) no-repeat;
    text-indent: -9999px;
    height: 23px;
    width: 174px;
    float: left;
}

/**** =nav ****/

nav {
    float: right;
}

nav li {
    display: inline;
}

/**** =banner ****/

.banner {
    background: url(../img/city-bg.jpg) no-repeat;
    width:695px;
    height:231px; 
}

.callout {
    background: black;
    height: 231px;
}

这是html

<html>
<head>
    <meta charset="utf-8" />
    <titel></title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/text.css">
    <link rel="stylesheet" href="css/960_12_col.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body >
    <div class="container_12">  <!--start container - using the 960 grid-->
        <header>
            <h1>White + Black</h1>
            <nav>
                <ul>
                    <li><a href="home.html">home</a></li>
                    <li><a href="ourservices.html">Our Serices</a></li>
                    <li><a href="howwework.html">How We Work</a></li>
                    <li><a href="testimonials.html">Testimonials</a></li>
                    <li><a href="workexamples.html">Work Examples</a></li>
                </ul>
            </nav>

            <div class="banner gird_10">
                <p>
                    some text some text some text some text some text
                </p>
            </div>
            <div class="grid_2 callout"></div>
        </header>

        <div class="main">
            <div class="grid_5">
                <h3>serices we offer</h3>
                <p>
                    some text some text some text some text some text some text some text some text some text
                </p>
                <p>
                    some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
                </p>
                <p><a href="#" class="button">Read More</a></p>
            </div>

            <div class="grid_5">
                <h3>how we work</h3>
                <p>
                    some text some text some text some text some text some text some text some text some text
                </p>
                <p>
                    some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
                </p>
                <p><a href="#" class="button">Read More</a></p>
            </div>
        </div>
        <div class="grid_2">
            <blockquote>
                <p>
                    some text some text some text some textsome text some text some text some text
                </p>
            </blockquote>
        </div>

        <footer>
            <p><strong>black + white</strong> themes via <a href="www.themeforest.net">themeforest</a></p>
        </footer>
    </div> <!--end container-->
</body>

Answer 1

我通常做的是创建一个.clear类：

.clear {
    clear:both;
}

把它放在浮动的元素之后。在这种情况下nav我认为是这样的：

<h1>Title</h1>
<nav>
    <!-- nav elements -->
</nav>
<div class="clear"></div>

但如果你有.clearfix类，请使用它。

Answer 2

试试这个https://jsfiddle.net/2Lzo9vfc/4/

HTML

<div class="container_12">  <!--start container - using the 960 grid-->
    <header>
    <div class="navigation">

        <h1>White + Black</h1>

        <nav>
            <ul>
                <li><a href="home.html">home</a></li>
                <li><a href="ourservices.html">Our Serices</a></li>
                <li><a href="howwework.html">How We Work</a></li>
                <li><a href="testimonials.html">Testimonials</a></li>
                <li><a href="workexamples.html">Work Examples</a></li>
            </ul>
        </nav>
    </div>

    <div class="banner gird_10">
        <p>
            some text some text some text some text some text
        </p>
    </div>

    <div class="grid_2 callout"></div>
</header>

    <div class="main">
        <div class="grid_5">
            <h3>serices we offer</h3>
            <p>
                some text some text some text some text some text some text some text some text some text
            </p>
            <p>
                some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
            </p>
            <p><a href="#" class="button">Read More</a></p>
        </div>

        <div class="grid_5">
            <h3>how we work</h3>
            <p>
                some text some text some text some text some text some text some text some text some text
            </p>
            <p>
                some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
            </p>
            <p><a href="#" class="button">Read More</a></p>
        </div>
    </div>
    <div class="grid_2">
        <blockquote>
            <p>
                some text some text some text some textsome text some text some text some text
            </p>
        </blockquote>
    </div>

    <footer>
        <p><strong>black + white</strong> themes via <a href="www.themeforest.net">themeforest</a></p>
    </footer>
</div> <!--end container-->

CSS

nav {
    float: right;
    display: inline-block;
    vertical-align: middle;
    padding: 30px 0;
}

header h1 {
    float: left;
    display: inline-block;
    vertical-align: middle;
}

nav li {
    display: inline;
}

/**** =banner ****/

.banner {
    background: url(../img/city-bg.jpg) no-repeat;
    width:695px;
    height:231px; 
}

.callout {
    background: black;
    height: 231px;
}

.navigation {
    clear:both;
    height: 100px;
}

Answer 3

您的横幅广告容器标记错误：<div class="banner gird_10">

修正（到grid_10）并解决您的问题：）

溢出：隐藏，清除：使用float后，两者和清除修复都无法正常工作

3 个答案: