Floating Div in chrome clears the parent div

Question

有一個可變高度的父div。在這個父div中，還有兩個div分別在左側和右側浮動。父div的背景必須在兩個子div之後結束。但在Chrome中這種情況並沒有發生（IE完美運行）。父div背景在childrean div開始之前結束。如果float從小孩divs中移除，那麼它很好，但它們並不相鄰。

Answer 1

嘗試在父div上設置overflow: auto。

問題是，浮動不是由他們的父母包含，除非他們的父母建立一個新的塊格式上下文。 overflow：auto就是這樣做的，就像其他一些事情一樣（包括浮動 - 即浮動父框，並且包含子浮動塊）。

但是，建立一個新的塊格式化上下文不是實現你想要的，大多數人甚至不這樣做。

這是您正確的？

HTML

<div class="out"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

CSS

.left { 
    float: left; 
} 

.right { 
    float: right; 
} 

如果彩車下面你插入一個新元素（讓我們給它一個類cleardiv的），並在其上應用clear: both，它，同樣的元素，將被推倒在它上面的所有浮動元素之下。因爲它本身不是浮動元素，所以它會像你所期望的那樣被父元素所包含。
所以，如果它包含在父元素中，並且它被推到最底部，那麼父元素將不得不一直「延伸」到底部 - 就像你想要的一樣。

這裏是新的HTML

<div class="out"> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="cleardiv"></div> 
</div> 

CSS

.left { 
    float: left; 
} 

.right { 
    float: right; 
} 

.cleardiv { 
    clear: both; 
}