Question

我试图让clearfix在我的网站上运行但是我无法让它正常工作。我试图在标题上使用clearfix，以便正确定位图像和背景beneth。

以下是我使用的代码。

谢谢！

// 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）。

jsfiddle here

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

看看它是否适合你。

Answer 2

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

你会记得比以前的解决方案和许多代码行更容易。

CSS - Clearfix无法正常工作

2 个答案: