CSS清晰理解

Question

我定义了一个简单的表单来学习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>

- TimeToCodeTheRoad

---

答案已在以下链接中提供了完整的解释。 enter link description here - vijay Kaneriya

Answer 1

9.5.2 控制浮动元素旁的流：'clear' 属性

适用于：块级元素

按钮默认是行内级别的元素，而不是块级元素。若要使 clear 生效，请给它应用 display:block;

label {

    color: blue;
    float: left;
    margin-right: 2px;
    clear: left;
    width: 3em;
}

input {

    border: 2px black solid;
    float: left;
    width: 10em;
}

button {
    display:block;
    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>

- Alohci