Html Can'；t获取浮动以匹配100%宽度或展开父级

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

我有一个100%宽度的div，下面有两个并排的浮动。它们似乎永远不等于100%的宽度，因此不能正确地与线对齐

同样，如果两个浮点展开，两个浮点的父div也不会展开，我不知道如何修复它

这就是我到目前为止所做的：

CSS

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> 

试验
测试2
你好
你好消息

JS Fiddle还提供：

我有一个100%宽度的div，下面有两个并排的浮动。它们似乎永远不等于100%的宽度，因此不能正确地与线对齐

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

同样，如果两个浮点展开，两个浮点的父div也不会展开，我不知道如何修复它

解决方法是使用

---

我找到了一个解决方案，这样就不需要将填充和边距作为宽度的单独总和来考虑：这要归功于Paul Irish。

<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>