無法獲得花車匹配100％寬度或擴展父母

Question

我有一些基本的CSS，即時嘗試做一個論壇的職位佈局，但我不能讓它工作。

我有一個div 100％的寬度，並排下面有兩個浮動。他們似乎永遠不會等於100％的寬度，所以不要正確地排列。

同樣，兩個浮動的父div不擴展，如果浮動擴大，我不知道如何解決它。

這是我到目前爲止有：

CSS

.parent{ 
    width: 100%; 
    top: 10px; 
    position: relative; 
    clear: both; 
    color: black; 
} 
.line{ 
    height:20px; 
    padding-left:10px; 
    lineHeight: 20px; 
    margin:0px; 
    border: 1px solid black; 
} 
.container{ 
    width:100%; 
    text-align: center; 
    border-bottom:1px solid red; 
} 
.fleft{ 
    float:left; 
    width:10%; 
    text-align:left; 
    margin:0px; 
    padding-left:10px; 
    border-right:1px solid black; 
} 
.fleft2{ 
    float:left; 
    width:86%; 
    text-align:left; 
    margin:0px; 
    padding-left:10px;  
    border-right:1px solid black; 
} 

的HTML：

<div class="parent"> 

    <div class="line"> 

     <span style="float:left;">Test</span> 
     <span style="float:right;">Test 2</span> 

    </div> 


    <div class="container"> 
     <div class="fleft"> Hello </div> 
     <div class="fleft2"> Hello Message</div> 
    </div> 
</div> 

JS小提琴還提供：

http://jsfiddle.net/yMaqR/10/

Answer 1

我有一個div 100％寬度，並排下面有兩個浮動。他們似乎永遠不會等於100％的寬度，所以不要正確地排列。

您必須考慮填充&保證金。因此，如果將浮動元素的寬度+填充+邊距加起來，並且它們會溢出父元素的寬度，則會被包裝。 所以一個可能的解決方案是刪除填充並將其添加到子元素。

同樣，兩個浮動的父div不擴展，如果浮動擴大，我不知道如何解決它。

的解決方案是使用一個clearfix

更多about floats和理解它們是如何工作的。