CSS浮動（無法獲得清除工作）

我通常可以通過使用clearfix風格修復所有與浮動有關的問題，但是我無法讓這個工作。我曾嘗試添加一個clearfix樣式到右欄。我寧願不使用單獨的clearfix div。CSS浮動（無法獲得清除工作）

下面的截圖應該說明問題：

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; 
}

來源

2013-01-04 transbetacism

你可以嘗試'。左，.right {溢出：隱藏; }'在你的css – Sean

提供你永遠不想讓內容出現在正常的邊界之外，這應該提供一個修復問題，增加最少的HTML + CSS（我可以看到） – Sean

我也無法看到clearfix，已經嘗試添加到右列 – Sean

這是一個解決方案，不使用浮動塊，而是使用內嵌塊。看看這是你在找什麼換

DEMO

修改CSS-

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

來源

2013-01-04 10:24:34 Cdeez

僅供參考，'inline-block'具有[可怕的IE支持]（http://caniuse.com/inline-block）。 –

對於舊版本的IE版本。但是浮標從文檔的正常流程中移除。這裏還有一篇關於爲什麼內聯塊應該用於浮動的好文章 - [浮動內嵌塊]（http://joshnh.com/2012/02/07/why-you-should-use-inline-block- when-positioning-elements /） – Cdeez

感謝您的提示和文章。我非常喜歡這個想法，但是我無法獲得字體大小爲零的修復程序，所以我在.left和.rigth之間有一些像素（我猜想有一個或兩個空格）。我可以通過使用26px的邊距而不是30px的方式來解決這個問題（或者使用註釋修復），但是我並沒有因爲我正在創建一個供數百人使用的主題。我可以將這些解決方法用於個人項目，但我懷疑很多客戶都會遇到這方面的問題 - 爲我提供許多支持門票... – transbetacism

不能應用float和clearfix相同的元素。

從Here，

的問題發生在一個浮動元素是集裝箱箱，該元素不會自動強制容器的高度調整到浮動元素內。當一個元素被浮動時，其父類不再包含它，因爲浮動元素已從流中移除。

您應該應用clearfix這樣的：

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

來源

2013-01-04 10:26:39

CSS浮動（無法獲得清除工作）

回答

相關問題