css - Bootstrap 的 clearfix 在表内不起作用

Question

我正在处理一个复杂的表格，该表格最终在一行中得到一个表格，该表格在其上使用了 Bootstrap 的网格系统。

问题是 col-* 类是 float 的，所以我们需要将 .clearfix 添加到父容器中，使其不会忽略内容的高度。好吧，只要尝试在表中使用 .clearfix，您就会看到修复程序使用的 :before 和 :after 元素得到了不需要的高度会导致容器中出现某种填充。

这里有一小段代码显示了带有 clearfix 错误的单元格结构:

<td colspan="4">    
    <div class="clearfix">
        <div class="col-xs-4">
            <input name="name">
        </div>
        <div class="col-xs-8">
            <input name="nickname">
        </div>
    </div>
</td>

Answer 1

阅读关于 how .clearfix works 的解释后，我已经删除了一些不必要的东西，并设法创建了一个替代类，它也可以在 display:table; 的元素内部工作:

.clearfixfix {
  content: "";
  clear: both;
  display: block;
}

目前只在 chrome 中测试过。