使用float：left和float時將容器高度增加到最高元素：right

Question

我有一個容器元素和兩個子元素，它們以float：left和float：right的形式放置。左浮動元素有一行文本。右浮動元素有兩條線，分開
。現在，在部署此元素時，容器佔用左浮動元素的高度，因此右浮動元素中的第二行出現在容器外部。我們能做些什麼來防止這種情況發生？

Answer 1

您需要什麼才能顯示：inline-block;或溢出：隱藏;財產在容器中。勾選此JSFiddle

<div id="m"> 
    <div class="a">a<br>c</div> 
    <div class="b">b</div> 
</div> 

#m{ 
    background-color: gray; 
    width: 100%; 
    overflow: hidden; 
} 

.a{ 
    float: left; 
} 

.a{ 
    float: right; 
} 

Answer 2

使用clearfix實現。該修補程序通常通過類名附加到要擴展爲包含浮動子元素的父DIV。例如，請參閱http://www.webtoolkit.info/css-clearfix.html