为什么没有 overflow:auto 保证金不适用

Question

我正在尝试创建一个标签和文本彼此相邻的视图页面。现在不提 overflow auto 就不会计算利润率。为什么？？

这是我的 css & html。

.dl-horizontal {
    margin-bottom: 20px;
    /*overflow:auto*/
}

.dl-horizontal dt {
    clear: left;
    float: left;
    font-weight: bold;
    line-height: 25px;
    width: 160px;
}

.dl-horizontal dd {
    content: " ";
    display: table;
    line-height: 25px;
}


.action-wrap{
    clear: both;
    margin-top: 20px;
}

<dl class="dl-horizontal">
    <dt>Name:</dt>          <dd>My Name</dd>
    <dt>Description:</dt>   <dd>Lorem ipsuem</dd>
    <dt>Group:</dt>         <dd></dd>
</dl>
<div class="action-wrap ng-scope">
     <button class="button cancel" >Cancel</button>
</div>

我个人多次遇到这个问题，我的快速修复是 overflow:auto。想知道是否可以使用它还是我做错了什么。

Answer 1

更新：我找到了更好的方法，忘记我下面说的了。只需添加显示：table；到 .dl-水平选择器。现在每个红色边框（出于视觉目的）都相同。

看来，如果dd标签里什么都没有的话，是不会下行的。顺便说一下，padding-bottom: 20px 可以，但如果您不想这样做，您可能必须在 dd 字段中放置一个（不间断 space）。这似乎也有效。 CSS 有很多怪癖:)

.dl-horizontal {
    margin-bottom: 20px;
    display: table;
border-bottom: 1px solid red;
}

.dl-horizontal dt {
    clear: left;
    float: left;
    font-weight: bold;
    line-height: 25px;
    width: 160px;
}

.dl-horizontal dd {
    content: " ";
    display: table;
    line-height: 25px;
}


.action-wrap{
    clear: both;
    margin-top: 20px;
}

<dl class="dl-horizontal">
    <dt>Name:</dt>          <dd>My Name</dd>
    <dt>Description:</dt>   <dd>Lorem ipsuem</dd>
    <dt>Group:</dt>         <dd></dd>
</dl>
<div class="action-wrap ng-scope">
     <button class="button cancel" >Cancel</button>
</div>
<dl class="dl-horizontal">
    <dt>Name:</dt>          <dd>My Name</dd>
    <dt>Description:</dt>   <dd>Lorem ipsuem</dd>
    <dt>Group:</dt>         <dd>&nbsp;</dd>
</dl>
<div class="action-wrap ng-scope">
     <button class="button cancel" >Cancel</button>
</div>

Answer 2

这基本上是由于保证金崩溃。

两个或多个框的相邻页边距（没有非空内容、填充或边框区域，或分隔它们的间隙）合并形成一个页边距。

防止这种情况的方法之一是向 css 添加浮动属性或 overflow:auto 以防止保证金崩溃。

检查此 fiddle ：http://jsfiddle.net/1pw4zwhf/1/

代码：

.dl-horizontal {
    margin-bottom: 20px;
    /* overflow:auto; */
     float:left;
}

为什么没有 overflow:auto 保证金不适用

why is margin not applying without overflow:auto

css

css-float