无法使浮点数匹配 100% 宽度或展开父项

Question

我有一些基本的CSS，我试图为论坛做一个帖子布局，但我无法让它发挥作用。

我有一个100%宽度的div，下面有两个并排的浮动。它们似乎永远不会等于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 Fiddle还提供了：

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

Answer 1

我有一个100%宽度的div，下面有两个并排的浮动。它们似乎永远不会等于100%的宽度，所以没有正确地对齐。

你必须考虑填充&边缘所以，如果你把浮动元素的宽度+填充+边距加起来，它们就会溢出父元素的宽度，它们就会被包装起来。因此，一个可能的解决方案是删除填充并将其添加到子元素中。

同样，如果两个浮点展开，并且我不知道如何修复它，那么两个浮点的父div就不会展开

解决方案是使用clearfix

更多关于浮子和了解其工作方式的信息。