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-height有关（如果您已将其设置在其他位置）。 DOM中的所有元素和＆＃34;基本上＆＃34;呈现为文本。如果您没有为元素设置高度，则它会假定计算高度的行高，而不是内容的高度。你基本上可以＆＃34;强迫＆＃34; .lineitem高度要添加一个clearfix元素，或者向其中一个子元素添加clear:both;。

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

Answer 2

很简单：

您需要清除float内的.lineitem。

将此添加到您的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; vs display:block;

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

Answer 3

将“float：left”添加到.line-item

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

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

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

3 个答案: