溢出：隐藏，清除：使用浮动后两者和清除修复都不起作用答案

【问题标题】：Overflow:hidden, clear:both and clear fix are not working after using float溢出：隐藏，清除：使用浮动后两者和清除修复都不起作用
【发布时间】：2015-10-26 07:22:39
【问题描述】：

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

当我将标题 h1 向左浮动（其中包含徽标的图像，我使用 css 添加图像作为背景）和右侧的导航列表时，它下面的所有内容都会向上浮动并在使用溢出后:hidden，它没有清除浮动。我已经尝试过 960 网格的 clear fix 类以及 clear:both。但它们也不起作用。

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

这是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>

【问题讨论】：

标签： html css

【解决方案1】：

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

.clear {
    clear:both;
}

并将其放在浮动元素之后。在这种情况下，nav 之后我想是这样的：

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

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

【讨论】：

【解决方案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;
}

【讨论】：

很高兴我能提供帮助，如果这对您有帮助，请接受答案。

【解决方案3】：

您的横幅容器的标记有错字：<div class="banner gird_10">

修复它（到grid_10），你的问题应该得到解决:)

【讨论】：