Question

我必须在我的div中浮动元素，我使用了在互联网上找到的clearfix，但它不能正常工作。

<div id="header" class="clear">
    <div class="header-left"> <a href="#" class="logo"></a> </div>

    <div class="header-right">
        <div class="quick-drop">
            <ul>
                <li class="quicklinks">Quicklinks
                    <img src="images/quicklink-icon.png" />
                </li>
                <li class="dropdown">Select from dropdown
                    <img src="images/dropdown-icon.png" />
                </li>
            </ul>
        </div>

        <div class="search-block">
            <input type="text" class="search" name="search" placeholder="Search for something here" />
        </div>
    </div>

    <div class="header-nav">it should be below but it is under</div>
</div>

CSS

.clear:before, .clear:after {
    content:"\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clear:after {
    clear: both;
}
.header-left {
    float:left;
    margin:40px 0;
}
.header-right {
    float:right;
    margin:40px 0;
}
.logo {
    background:url('../images/logo.png') no-repeat;
    width:250px;
    height:50px;
    display:block;
}
.quick-drop {
    display:inline-block;
}
.quick-drop ul {
    margin:0;
    padding:0;
    margin:18px 0;
}
.quick-drop ul li {
    list-style-type:none;
    display:inline-block;
    height:19px;
    padding:3px;
    text-align:center;
    font-size:12pt;
}
ul .quicklinks {
    color:#c7c7c7;
    border-right:1px #c7c7c7 solid;
}
ul .dropdown {
    color:#58159b;
}
.quick-drop ul li img {
    margin:0 15px;
}
.search-block {
    display:inline-block;
}
.search {
    background:url('../images/search-icon.png') right no-repeat #fff;
    background-position:260px;
    width:260px;
    height:16px;
    border:none;
    outline-color:#58159b;
    padding:15px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color:#c7c7c7;
}

http://jsfiddle.net/qKFAc

.header-nav应该低于2个div，但它在它们之下，我做错了什么？

谢谢

Answer 1

明确的修复应该在浮动元素之后，如下：

从父级中删除clear类。然后：

<!-- Floated -->
<div class="clear"></div>
<div class="header-nav">it should be below but it is under</div>

Answer 2

.header-nav
{
    clear:left;
}

请添加此css规则

Answer 3

添加：

.clear {
    clear: both;
}

jsFiddle：http://jsfiddle.net/qKFAc/1/

css clearfix并不像它应该的那样工作

3 个答案: