我一直在寻找以清除浮动,并找到最好的方法完美的解决方案,如果你看看答案,该解决方案使用display:table,而不是display:block,原因进行了说明:
如果用于包含子元素的顶部边距,则仅使用
table而不是block必需:before.
我尝试理解其含义,我做了一些测试,但我无法弄清楚使用的原因是什么display:table,如果有人可以提供代码示例来显示差异和需要使用display:table.
编辑:
这是一个小提琴,我试着测试差异,我敢肯定有一个,但我无法弄清楚要测试什么.
编辑说明:
我的问题不在于显示之间的区别block/table,我的问题是关于使用display:table和不使用的原因display:block(关于清除浮动),布莱恩从这个答案中得到了解释,但我无法理解其中的原因,如果任何人都可以解释原因,并提供一个代码示例来说明差异.
Bol*_*ock 12
您引用的评论 - 以及扩展名代码 - 来自Nicolas Gallagher提出的微清除修复,如该问题的最佳答案中所述.尼古拉斯写了一篇介绍这种技术的文章(出于某种原因与其他答案没有关联),并在其中解释了为什么display: table被使用,如下:
这个"微清除"生成伪元素并将其设置
display为table.这将创建一个匿名表单元格和一个新的块格式化上下文,这意味着:before伪元素可以防止上边距折叠.所述:after伪元件用于清除浮体.因此,不需要隐藏任何生成的内容,并且减少了所需的代码总量.
更详细地说,如果一个元素有第一个子节点display: block并且它们都是,并且子节点具有上边距,那么会发生的情况是子边距将与父边距(如果有的话)组合或折叠,从而导致上边缘显然从子元素中消失,这有时可能是不合需要的.有关此效果的说明,请参阅此问题.
由于显而易见的原因,边距不会因表格元素而崩溃,这就是display: table黑客行为的原因.
所以,基本上,display: table- 并且通过扩展,:before伪元素 - 对于clearfix来说不是必不可少的,只是一个额外的黑客来阻止边缘在元素和它的第一个孩子之间崩溃.如果你想要做的就是清除内部浮动,这就是一个clearfix的意思,那么你就不需要display: table或:before.