html - 选择，输入和标签元素是否具有height属性？

我的标记结构如下：

<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;
}

据我所知，没有应用其他相关样式。

最佳答案

select、input和label元素是否具有height属性？
若要声明“height”，元素必须是display:“block”或“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 */
}

（真正的问题）
为什么当我浮动父元素的子元素时它会崩溃？
当你“浮动”元素时，它会把它们从传统的流程中去掉，所以你必须使用“清除修正”
您还可以使用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>