我定义了一个简单的表单来学习clear属性。我惊讶的是,“提交”按钮没有移到下一行。我理解clear:both属性的含义是:应用于该元素后,左侧或右侧没有浮动元素。根据这个定义,我期望“提交”按钮会移到最后一行,因为我已经在input和label标签中应用了clear属性。
请问有人能解释一下为什么这样不起作用吗?请注意,我的目标是弄清楚我的理解哪里出了问题,而不是如何使“提交”按钮移到下一行。
请问有人能解释一下为什么这样不起作用吗?请注意,我的目标是弄清楚我的理解哪里出了问题,而不是如何使“提交”按钮移到下一行。
label {
color: blue;
float: left;
margin-right: 2px;
clear: left;
width: 3em;
}
input {
border: 2px black solid;
float: left;
width: 10em;
}
button {
clear: both;
margin-left: auto;
margin-right: auto;
}
<form action="#">
<fieldset>
<label>Name </label>
<input type="text" value="Enter name" />
<label>Phone </label>
<input type="text" value="Enter phone" />
<button type="button">Submit </button>
</fieldset>
</form>