Question

好的，我在 :: after 功能方面获得了更多乐趣。以下是两个例子：

问题：http://codepen.io/anon/pen/zrBJRO
作品：http://codepen.io/anon/pen/LGZJQN

第一个例子，我将.clearfix类添加到div中我想将其应用于：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

但是，这不起作用 - 红色条（应显示在 3rd .link-listing div下），只显示在页面顶部。

另一方面，如果你看第二个例子（http://codepen.io/anon/pen/LGZJQN），你可以看到这个有效......但是我不得不回到使用可怕的div来清除它们：

 <div style="clear:both"></div>

这个练习的想法是试图摆脱尽可能多的DOM元素（每个链接我们目前有2＆＃34; clear＆＃34; divs（有时4个，取决于是否有＆＃ 34;在列表中提供＆＃34;以及每页有50个链接 - 这就是我们可以删除的很多DOM元素，如果这样可行的话:)）

Answer 1

我认为这里使用花车是夸大的。删除浮动具有相同的行为，您不再需要提供clearfixes。浮动用于浮动元素，而不是布局。

https://jsfiddle.net/j9oecqp3/

只需更改浮动显示块

即可

  .link-listing {
       display:block; /* before was float:left;
  }

clearfix似乎没有用

1 个答案: