CSS容器高度为零...为什么不是内容高度？

Question

我没有看到 lineitem 元素之间的任何垂直空间（由 lineitem 中的 50px 边距指定）。但是，如果我添加类似 height:40px;到 lineitem 的 css 格式，则高度和边距都受到尊重。为什么 lineitem 不只是导出输入和标签元素的高度并将边距添加到任何内容？

<div id="checkoutform">
<div class="lineitem">
<input type="text" name="EMAIL">
<label for="EMAIL">Your E-Mail:</label>
</div>

<div class="lineitem">
<input type="text" name="NAME">
<label for="NAME">Your Name:</label>
</div>
</div><!-- #checkoutform -->

还有 CSS：

#checkoutform .lineitem {
    margin:0px 15px 50px 0px;
    clear:both;
}

#checkoutform label {
    float: right;
    text-align:right;
    font-family:"Open Sans";
    font-weight:normal;
    font-size:14px;
}

#checkoutform input {
    width:280px;
    float:right;
    font-family:"Open Sans";
    font-weight:normal;
    font-size:14px;
}

Answer 1

在 .line-item 中添加“float: left”

https://jsfiddle.net/q6ytv3tt/1/

#checkoutform .lineitem {
    margin:0px 15px 50px 0px;
    clear:both;
    float:left;


}

Answer 2

它可能与元素内容的line-height 有关（如果您已在其他地方设置）。 DOM 中的所有元素并“基本上”呈现为文本。如果您没有为元素设置高度，它假定计算高度的行高，不一定是内容的高度。您基本上可以“强制”.lineitem 高度添加一个 clearfix 元素，或添加一个 clear:both; 到它的其中一个子元素。

我建议朝这个方向看，因为浮动元素作为布局的一种手段似乎不是公认的做法。

Answer 3

很简单：

你需要清除.lineitem里面的floats。

将此添加到您的css，这将使用pseudo 元素清除浮动，而无需修改您的HTML。

#checkoutform .lineitem:after {
  display: table;
  clear: both;
  content: "";
}

演示： https://jsfiddle.net/jrkph1ra/

它起作用的原因：

浮动元素脱离了其容器的正常高度计算流程。

在带有clear:both; 的浮动元素之后的元素将意味着该元素的左侧或右侧不允许浮动元素，它将元素的边距边缘移动到所有相关浮动的边距边缘下方，强制浏览器在计算高度时考虑浮动元素的高度。

该元素可以是浮动元素的父元素的伪元素，因此无需修改 HTML。

“清除浮动”是一种常见做法，并且经过充分测试。

如果您经常使用它，您可以创建一个类似clearfix 的类并将该类添加到所有相关元素中。

.clearfix:after {
  display: table;
  clear: both;
  content: "";
}

然后将.clearfix 添加到所有带有浮动子元素的相关元素。

演示 https://jsfiddle.net/jrkph1ra/1/

display: table; 与 display:block;

display: table; 和display:block; 都将生成块级元素，主要区别在于table 只会扩展到其内容的宽度，在这种情况下宽度为0 但block 会扩展到其容器的宽度，因此使用table 可以最大限度地减少此方法的占用空间。