CSS 浮动(无法让 clearfix 工作)

Question

我通常可以通过使用clearfix样式来修复所有与浮点相关的问题，但是我不能让这个工作。我已经尝试添加一个clearfix样式到右列。我宁愿不使用单独的clearfixdiv。

下面的截图应该说明了这个问题:

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应用于同一元素。

From Here，

当浮动元素位于容器盒中时，就会出现这个问题。该元素不会自动强制容器的高度调整到浮动元素。当元素被浮动时，它的父元素不再包含它，因为浮点数已从流中移除。

你应该像这样应用clearfix:

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

Answer 2

这是一个不使用float而是使用inline-block的解决方案。看看这是不是你要找的-

css——

修改

#wrapper 
{
   min-width:700px; 
}
.left,.right { display:inline-block; }
.left
{
    width:70%;
    min-width:420px;
}
.right
 {
    width:28%;
    min-width:170px;
 }