如何设置div float样式：左右正确

Question

我只是在玩一些非常基本的HTML，我试图让自己陷入困境。我最后一次真正做了什么结构明智的表仍然是理想和主导。所以我使用了div。

<div style="text-align:center;">Please fill out the following information
    <div>Name, email, or alias:</div>
    <div><input type="text" id="user"></div>
    <div>Master Password:</div>
    <div><input type="password" id="pwdOne"></div>
    <div>Re-enter:</div>
    <div><input type="password" id="pwdTwo"></div>
</div>

导致了这个：

所以我做了一些挖掘并查看了一些格式化示例并重新做了这样做：

<div style="text-align:center; clear: both;">Please fill out the following information</div>
<div style="float: left;">Name, email, or alias:</div>
<div style="float: right;"><input type="text" id="user"></div>
<div style="float: left;">Master Password:</div>
<div style="float: right;"><input type="password" id="pwdOne"></div>
<div style="float: left;">Re-enter:</div>
<div style="float: right;"><input type="password" id="pwdTwo"></div>

据我所知，这应该是正确的，但现在我得到了：

当左右浮动时，如何区分每个div，以便它们正确堆叠？

Answer 1

尝试添加一个明确清除浮动的类，br或div是相同的：

<div style="text-align:center; clear: both;">Please fill out the following information</div>
<div style="float: left;">Name, email, or alias:</div>
<div style="float: right;"><input type="text" id="user"></div>
<br class="clear">
<div style="float: left;">Master Password:</div>
<div style="float: right;"><input type="password" id="pwdOne"></div>
<br class="clear">
<div style="float: left;">Re-enter:</div>
<div style="float: right;"><input type="password" id="pwdTwo"></div>
<br class="clear">

.clear{
    clear:both;
}

DEMO