自動高度和浮動問題

Question

我以前有過這個問題，不記得是否以及如何修復它。

我必須創建一個場景，我有2個DIV左右浮動在父DIV中。 2浮動DIV的高度爲：auto，但父母忽略它們（完全合乎邏輯），父DIV的背景無法看到。我知道這個問題是什麼，但是有什麼建議可以解決這個問題嗎？或者有其他的選擇，我願意嘗試一種新的方法。

在此先感謝您的幫助。

Answer 1

您在父DIV中一個div需要一個clear:float：

.clear 
{ 
    clear:both; 
} 

<div id="parent"> 
<div id="left"></div> 
<div id="right"></div> 

<div class="clear"></div> 
</div> 

There are more options available to solve this problem.

Answer 2

由於沒有意義的HTML元素要添加，可以clear floats the overflow way

<style type="text/css" media="screen"> 
    #allmychildrenfloat { 
     overflow: hidden; 
    } 

    #allmychildrenfloat p { 
     float: left; 
    } 
</style> 
<div id="allmychildrenfloat"> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec leo arcu, iaculis at, ultricies et, porta eget, urna. Nulla facilisi.</p> 
    <p>dolor sit amet lorem ipsum</p> 
</div> 

或者你可以使用display: inline-block;而不是浮動屬性，它取決於你的確切的ne編輯。 IE7-不理解此值，但可以使用IE6和7 display: inline; zoom: 1;。如果你仍然支持Fx 2，那麼也有其他選擇。

Answer 3

我知道，回答這個問題太遲了，但是任何來到這裏的人都可以從這個答案中獲益。

USE display: inline-flex 而不是浮動，並很高興。

注意：您需要檢查內聯彈性值的支持