css clearfix未按预期工作

Question

我有一个简单的dl / dt / dd列表，它很窄，所以一些列是双行或三行的，所以我需要清除每一行以使其看起来更好，但我不能使clearfix工作，以下是代码：

<dl>
  <dt>first column:</dt><dd class="clearfix">second column</dd>
  <dt>FIRST COLUMN:</dt><dd class="clearfix">SECOND COLUMN</dd>
  <dt>first column:</dt><dd class="clearfix">second column</dd>
</dl>

dl {
  width: 250px;
  display: block;
  overflow: hidden;
  margin-top: 5px;
  border: 1px solid #000000;
}
dt {
  float: left;
  width: 24%;
  font-weight: 300;
  color: #555555;
  overflow: hidden;
  display: block;
  border: 1px solid #FF0000;
}
dd {
  float: left;
  width: 74%;
  margin: 0;
  font-weight: 500;
  overflow: hidden;
  display: inline-block;
  border: 1px solid #0000FF;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

下面是一个小提琴示例：https://jsfiddle.net/7a0pgoef/

我做错了什么？

Answer 1

如果您希望每个<dt>从新行开始，则应将clear属性赋予<dt>本身，以便从其left端对浮点数进行clear。

​

dl {
    width: 250px;
    overflow: hidden;
    border: 1px solid #000000;
}
dt {
    float: left;
    width: 24%;
    border: 1px solid #FF0000;
    clear: left;
}
dd {
    float: left;
    width: 74%;
    margin: 0;
    border: 1px solid #0000FF;
}

<dl>
  <dt>first column:</dt><dd>second column</dd>
  <dt>FIRST COLUMN:</dt><dd>SECOND COLUMN</dd>
  <dt>first column:</dt><dd>second column</dd>
</dl>

​

::after通常用于将伪子元素附加到包含浮点数的父元素中。

但是在这个特定的实例中，它没有任何帮助，因为<dl>元素只能包含<dt>和<dd>。换句话说，在<dt>/<dd>对周围添加另一个包装器是不允许/有效的。