CSS - Clearfix не работает

#html #css

#HTML #css

Вопрос:

Я пытаюсь заставить clearfix работать на моем веб-сайте, однако я не могу заставить его работать правильно. Я пытаюсь использовать clearfix в заголовке, чтобы изображение и фон были расположены правильно.

Вот код, который я использовал.

Спасибо!

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

1. Вам нужно показать нам еще немного вашего CSS: на самом деле вы не показали ни одного элемента, для которого установлено значение float , поэтому очищать нечего. Возможно, вы могли бы протестировать свой пример на jsfiddle.net

2. я добавил еще немного CSS, спасибо

Ответ №1:

Вы можете добавить пустой класс с классом clearfix (без :after) сразу после div, который вы хотите очистить.

jsfiddle здесь

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

Посмотрите, работает ли это для вас.

Ответ №2:

В этом случае, не используя :before , вы можете использовать более короткий и простой overflow: hidden on .container .

Вы будете помнить, что это проще, чем ваше решение с before и множеством строк кода.