CSS明確な理解

Question

私はクリアについて学ぶためにシンプルなフォームを定義しました。私は「Submit」ボタンが次の行に行かないことに驚いています。私の明確な理解：どちらも、クリアが適用される要素の左または右にフローティング要素がないはずです。この定義では、入力とラベルにクリアを適用しているので、最後の行を移動するにはSubmitを期待していました。

誰かがこれがなぜ機能しないのか説明できますか？ブロックレベル：Plsは私の目標は、私の理解は、次の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

を送信]ボタンを持参することに適用されますどのように欠陥があるとないところを理解することであることに注意要素

ボタン、デフォルトでは、ブロックレベルではなく、インラインレベルの要素です。 vel要素。 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>