css clearfix 没有按预期工作

Posted 2023-03-04

【中文标题】css clearfix 没有按预期工作

【英文标题】：css clearfix isnt working as it supposed to be

【发布时间】：2013-12-01 23:46:33

【问题描述】：

我必须在我的 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 之下，但它在它们之下，我做错了什么？

谢谢。

【问题讨论】：

你知道.clear 和.clearfix 类之间的区别吗？此外，我不明白下面和下面之间的区别（我猜一个是在 Z 轴上绝对定位。我会用底部作为另一个，但是英语不是我的第一语言，所以也许......）

Difference between clear and clearfix。您不应该将上述行为命名为“clear”（只是按照惯例），因为当您听到“use clear”或“is it in a clearfix?”时会感到非常困惑。并且您的班级两者都做，或者另一个班级做什么;)

【参考方案1】：

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

从父级中移除 clear 类。那么：

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

【讨论】：

我不想使用 - 它的脏代码

【参考方案2】：

.header-nav

    clear:left;

请添加此css规则

【参考方案3】：

添加这个：

.clear 
    clear: both;

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

【讨论】：

为什么不呢？他的 CSS 中缺少明确的规则。 puesdo 课程在那里，但不是标准课程。我用小提琴更新了帖子。

这个 CSS 代码对 OP html 代码没有任何作用（如果在标题之前有其他元素可能会这样做）。既然您已经发布了一个带有您未提及的修改的 HTML 代码，是的，这适用于您的 HTML 代码。