Haben die Elemente select, input und label die Eigenschaft height?

Question

Die Struktur meiner Markup sieht wie folgt aus etwas:

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

Der Text ist fett, die select-Tags ihren Standard Styling haben, und die label Tags werden, wie unten und alle nehmen Platz auf der Seite gestylt. (Die input hat display:none.) Wenn jedoch die #outerdiv explizit eine Höhe gegeben wird, bricht es zusammen; Wenn ein 1px-Rahmen angewendet wird, wird eine gerade horizontale Linie erstellt, von der die anderen gestylten Elemente zu "hängen" scheinen.

Warum ist das/was passiert hier?

Edit: Alle inneren divs links schwebte sind, und die Etiketten sind gestylt als solche:

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

Keine weiteren relevanten Arten sind, soweit ich das beurteilen kann angewandt.

Answer 1

Haben Auswahl-, Eingabe- und Labelelemente eine Höheneigenschaft?

'height' zu deklarieren, hat das Element entweder Anzeige sein: "Block" oder "inline-block" -

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

(wirkliche Frage)

Warum fällt mein Elternelement zusammen, wenn ich seine Kinder schwebe?

Wenn Sie ‚schweben‘ Elemente, nimmt sie sie aus dem traditionellen Flow - und so müssen Sie eine verwenden „clear-fix.“ What is a clearfix?

Sie können auch overflow: hidden; oder einen Rahmen verwenden, um es wieder in Ordnung zu bringen. Überlauf versteckt verwendet, um einige Nebenwirkungen haben ... aber ich glaube nicht, das ist ein Anliegen in diesen Tagen ...

.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>