CSS - Clearfix不起作用

Question

我试图获得明确的工作在我的网站上，但我不能让它正确的工作。我试图在标题上使用清除方法，这样图像和背景就可以正确定位了。

这是我用过的代码。

谢谢!

// CSS

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

#logo {
    display:block;
    padding-top: 26px;
    float:left;

}

#hero {

 background:#eae8e8;  

}

/*-----------------------
Navigation
------------------------*/

nav ul {
 margin: 0;
padding: 0;

}

nav ul li {
    list-style: none; /* gets rid of bullet points */
    float:right;
/* --------------------------

Global styles

HTML

<header> <!-- html 5 -->

                <div class="container clearfix">

                <div id="logo">

                <a href="/" title="return to home" id="logo"> <!-- title adds tooltips -->
                <img src="logo.png" alt="logo">
                </a>
                </div>
                <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="contact.html">Contact</a></li>  
                </ul>
                </nav>
            </div> <!-- container div -->

                <div id ="hero">

                <img src="hero.jpg" alt="hero image" id="hero-image">

                </div> <!-- end hero div-->

            </header>

Answer 1

您可以在您要清除的div之后添加一个空类，并使用clearfix类(没有: after )。

小提琴手

<div class="clearfix"></div>

看看它对你有用吗。

Answer 2

在这种情况下，如果不使用:before，您可以在.container上使用更短、更简单的overflow: hidden。

您将记住，这比使用以前的解决方案和许多代码行更容易。