html - CSS float (无法让 clearfix 工作)

Question

我通常可以使用 clearfix 样式来修复所有与 float 相关的问题，但我无法使这个起作用。我尝试在右栏中添加 clearfix 样式。我宁愿不使用单独的 clearfix div。

下面的截图应该能说明问题:

http://min.us/leRsoGVqAQtbJ

HTML:

<div class="two-thirds left">

    <!-- Quotes -->
    <div class="notepad">
        <p class="quote">“I have worked [...]</p>
        <span class="who">- Clara Craftsman [...]</span>
    </div><!-- .notebook -->

</div><!-- .two-thirds -->

<div class="one-third right clearfix">
    p>This should be floating to the right of the notepad, but the Work Experience heading should be below.</p>
</div>

CSS:

/* Floates*/
.left { float:left; }
.right { float:right; }

/* Quotes */
.notepad,
.quote,
.who {
    display:block; 
    font-family:"Neucha",cursive;
    font-size:16px;
}
.notepad { 
    width:409px;
    padding-top:25px;
    margin-left:30px;
    background:url(../img/misc/notepad/notepad-top-big.png) no-repeat; 
}
.quote {
    width:315px; /* 409px total */
    padding:0 28px 24px 66px;
    background:url(../img/misc/notepad/notepad-middle-big.png) repeat-y;
}
.who { 
    width:315px; /* 409px total */
    padding:0 28px 48px 66px;
    background:url(../img/misc/notepad/notepad-bottom-big.png) no-repeat;
    text-align:right;
    font-style:italic;
    margin-top:-24px;
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Answer 1

您不能将 float 和 clearfix 应用于同一元素。

来自 Here ,

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.

您应该像这样应用 clearfix:

<div class="clearfix">
    <div class="one-third right">
        <p>This should be floating...</p>
    </div>
</div>