選択、入力、およびラベル要素に高さプロパティがありますか？

Question

私のマークアップの構造は、このようなものになります。テキストを太字で

<div id="outerdiv"> 
    <div> 
     Some text <select>...options...</select> 
    </div> 
    <div> 
     <input><label><input><label>... 
    </div> 
    <div> 
     Some text <select>...otions...</select> 
    </div> 
</div> 

を、selectタグは、デフォルトのスタイルを持っている、とlabelタグは以下のようにスタイルされており、すべてのページ上のスペースを取ります。 （inputにはdisplay:noneがあります）。ただし、#outerdivに明示的に高さが指定されていない限り、崩壊します。 1pxのボーダーが適用されている場合、他のスタイル付き要素が「ハングする」ように見える直線の水平線が作成されます。

なぜこの/ここで起こっているのですか？

編集：すべての内側のdivは、左浮かべている、そしてラベルのようなスタイルされています

.CheckLabels{ 
    display: inline-block; 
    width: 7%; 
    height: 45px; 
} 

他の関連するスタイルは、私の知る限り適用されません。

Answer 1

select、input、およびlabel要素にheightプロパティがありますか？ '高さ' を宣言する

は、要素は、いずれかの表示することがあります： "ブロック" または "インラインブロック" -

.thing { 
    display: block; /* or */ 
    display: inline-block; 
    height: 20px; /* 95% of the time.. you should NOT declare a height */ 
    /* but this will work */ 
} 

（本当の問題）

なぜ私の親要素は、子要素を浮かべると崩壊しますか？

あなた「フロート」要素、それは伝統的な流れからそれらを取る - 「クリア修正」など、あなたが使用する必要がありますWhat is a clearfix?

また、overflow: hidden;または境界線を使用して、順番にそれを騙すこともできます。入力とラベルのマークアップが間違っている

.parent { 
 
    background: lightgreen; 
 
    overflow: hidden; /* but really - you should use a clearfix */ 
 
} 
 

 
.parent div { 
 
    width: 100%; 
 
    float: left; 
 
}

<section class="parent"> 
 
    <div> 
 
    Some text 
 
    <select> 
 
     <option value="1">One</option> 
 
     <option value="2">Two</option> 
 
    </select> 
 
    </div> 
 

 
    <div> 
 
    <label for="thing-1">Input label</label> 
 
    <input type="text" id="thing-1"> 
 
    </div> 
 

 
    <div> 
 
    Some text 
 
    <select> 
 
     <option value="1">One</option> 
 
     <option value="2">Two</option> 
 
    </select> 
 
    </div> 
 
</section>