CSS Clear understanding

Question

I have defined a simple form to learn about clear. I am surprised the 'Submit' button is not going to the next line. My understanding of clear:both is that there should be no floated element to the left or right of the element to which clear is applied. Given this definition, I was expecting Submit to move the last line since I have applied clear to input and label.

can someone pls explain why this is not working? Pls note my goal is to understand where my understanding is flawed and not how to bring the Submit button to the next linec

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>

Answer is already mentioned in below link with fully explanation. [enter link description here](http://stackoverflow.com/a/12871734/6902979) — vijay Kaneriya, Mar 11 '17 at 12:05

Alohci · Accepted Answer · 2017-03-11T12:44:25.800

9.5.2 Controlling flow next to floats: the 'clear' property

Applies to: block-level elements

Button, is by default, an inline level element, not a block level element. To make clear apply, give it 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>

CSS Clear understanding

1 Answers1