选择，输入和标签元素有高度属性吗？

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>