在表单开发过程中，经常会使用浮动来排列标签、输入框、提示文本等元素，但浮动元素会脱离文档流，导致后续元素排列异常，这时候css的clear属性就能发挥关键作用，帮助我们调整元素位置，让表单布局更符合预期。
clear属性的基本作用
clear属性用于指定元素哪一侧不允许出现浮动元素，它的常用取值有以下几个：
- left：元素左侧不允许有浮动元素
- right：元素右侧不允许有浮动元素
- both：元素左右两侧都不允许有浮动元素
- none：默认值，允许两侧出现浮动元素
当给一个元素设置clear属性后，该元素会移动到所有指定侧浮动元素的下方，重新回到文档流的正常排列中。
表单布局中常见的浮动问题
很多表单会采用左浮动排列标签和输入框的布局方式，比如让标签左浮动，输入框也左浮动，实现标签和输入框在同一行的效果。但这种方式很容易引发问题，比如下面的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.form-item {
margin-bottom: 10px;
}
.form-label {
float: left;
width: 80px;
line-height: 30px;
}
.form-input {
float: left;
width: 200px;
height: 30px;
}
.form-tip {
line-height: 30px;
color: #999;
}
</style>
</head>
<body>
<div class="form-item">
<label class="form-label">用户名：</label>
<input type="text" class="form-input">
<span class="form-tip">请输入4-16位字符</span>
</div>
<div class="form-item">
<label class="form-label">密码：</label>
<input type="password" class="form-input">
<span class="form-tip">请输入6位以上密码</span>
</div>
</body>
</html>
运行上面的代码会发现，第一个表单项的提示文本会和标签、输入框在同一行，第二个表单项的标签会紧挨着第一个表单项的提示文本排列，完全不符合我们预期的每行一个表单项的效果。这是因为form-label和form-input都是左浮动元素，脱离了文档流，而form-tip没有浮动，会紧跟在浮动元素后面，同时form-item没有包裹浮动元素，高度会塌陷，导致后续表单项排列错乱。
使用clear属性优化表单布局
我们可以通过给表单项的提示文本设置clear属性，同时给表单项容器清除浮动，来解决上面的问题，优化后的代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.form-item {
margin-bottom: 10px;
/* 清除内部浮动，避免高度塌陷 */
overflow: hidden;
}
.form-label {
float: left;
width: 80px;
line-height: 30px;
}
.form-input {
float: left;
width: 200px;
height: 30px;
margin-right: 10px;
}
.form-tip {
/* 左侧不允许有浮动元素，移动到浮动元素下方 */
clear: left;
line-height: 30px;
color: #999;
}
</style>
</head>
<body>
<div class="form-item">
<label class="form-label">用户名：</label>
<input type="text" class="form-input">
<span class="form-tip">请输入4-16位字符</span>
</div>
<div class="form-item">
<label class="form-label">密码：</label>
<input type="password" class="form-input">
<span class="form-tip">请输入6位以上密码</span>
</div>
</body>
</html>
除了处理提示文本的位置，clear属性还可以优化多列表单的布局。比如我们需要做一个两列的表单，每行的两个表单项左浮动排列，这时候给每个表单项设置width: 50%; float: left;，然后给每行的最后一个表单项设置clear: right;，或者给下一行的第一个表单项设置clear: left;，就能避免浮动元素排列到上一行末尾的问题。
clear属性的使用注意事项
在使用clear属性优化表单布局时，需要注意以下几点：
- clear属性只对块级元素生效，如果是行内元素需要先将display设置为block再使用clear属性
- clear属性只能影响设置该属性的元素本身的位置，不会影响其他浮动元素的排列
- 如果表单中浮动元素较多，也可以给表单容器设置
overflow: hidden或者伪元素清除浮动，再配合clear属性调整个别元素的位置，效果会更稳定
通过合理使用clear属性，我们可以快速解决表单布局中浮动带来的排列问题，让表单元素的排列更规整，提升页面的可读性和用户体验。