CSS Comprendre clairement

Question

J'ai défini un formulaire simple pour en savoir plus sur clear. Je suis surpris que le bouton "Envoyer" ne va pas à la ligne suivante. Ma compréhension de clear: les deux est qu'il ne devrait y avoir aucun élément flottant à gauche ou à droite de l'élément auquel clear est appliqué. Compte tenu de cette définition, je m'attendais à ce que Soumettre déplace la dernière ligne depuis que j'ai appliqué clairement à la saisie et à l'étiquetage.

quelqu'un peut-il expliquer pourquoi cela ne fonctionne pas? SVP, noter mon objectif est de comprendre où ma compréhension est erronée et non comment amener le bouton soumettons à la prochaine 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 1

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

S'applique à: au niveau du bloc éléments

Le bouton est par défaut un élément de niveau en ligne et non un bloc élément vel. Pour clear appliquer, lui donner 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>