html - 如何设计 div float : left and right correctly

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

尝试添加一个 clear 类来清除 float ，就像这样 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