是不是弃用了clearfix？

正如在另一个答案中所提到的那样,缺点hidden是,它会出人意料地隐藏下拉菜单等内容.但是,通过浮动父容器,还有另一种方法可以包含一行.这通常适用于overflow: hidden有缺点的地方,并且浮动也有助于解决许多遗留的IE问题,尤其是在列表中.如果你可以使用宽度,那么我会使用"漂浮在浮子",或display: inline-block.

我不是说"clearfix"没有用 - 但对我而言,它在CMS主题(如Wordpress和Drupal)中根深蒂固,我认为在很多情况下它使用得太多而且实际上并不需要div被清除或包含.

我实际上无法想到一种情况,我不能使用溢出或漂浮,而不是clearfix,但我的大脑是在假日模式 - 但因为它,clearfix,是一个复制/粘贴解决方案,有时是最容易推荐的,但是它必须是为IE设置hasLayout的那个,当然现在溢出和浮动也是如此.

补充说 这刚刚再次出现:大脑不在假日模式..

我真的开始认为是的,clearfix是没有必要的(至少我还没有找到它的例子)甚至@ thirtydot上面的例子可以解决display: inline-block并且仍然有IE6支持,容器有一个固定的宽度具有IE7及以下hasLayout要求,并且通过使其成为所有其他浏览器的内联块,它可以居中,并且"偏移"粘贴元素将正常工作,而容器垂直拉伸

例

我也看到了使用:before以及:afterclearfix hack中那些折叠边距的新改进的clearfix 的引用,但除非我遗漏了演示有缺陷的东西 - pre元素中有不均匀的空白和"clearfixed"框实际上不包含任何浮点数,只要你在其中浮动元素,每个方法执行相同的操作.

注意pre元素上的边距反应与其他元素没有相同的反应(所以尝试使用padding而不是margin来测试时看到相同的图片)..还有另一个IE"foible",即IE不能正确包含边距它们没有明确指定,并且在演示中有明确的边距,h2但并非p如此所有的东西都是相同的,因为TJK在该页面中演示的明确元素是人为地强制在正常块元素上包含边距,与1px顶部/底部填充的方式大致相同,因为浏览器无论如何都会这样做!

如果你这样做,然后将元素浮动到那些容器中(无论如何都要清除) - 边距确实包含你可能想要的那些,就像它们在新的块格式化上下文中一样 - 没有任何额外的:before部分,所有clearfix变体同样有效!

请参阅重新加载的演示

所以在我看来,不再需要这种"clearfix"方式,只需找到创建新的块格式化上下文的最佳方法,使用旧版IE的haslayout ..两者的属性是相同的!

正如TJK在他的文章中指出的那样:http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

更好的选择

如果您可以将宽度应用于包含浮点数的元素,那么您最好的选择是使用:

display: inline-block; width: <any explicit value>;

我认为这是公平的,即使有100%的元素可能需要填充,你可以结合使用 box-sizing

.clearfix {
  display: inline-block;
  width: 100%;
  *width: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Run Code Online (Sandbox Code Playgroud)

Answer 3

ste*_*ecb 8

overflow:hidden是非常"强大"(我已经使用它好几年了,我同意大卫所说的)但同时暴露出一个问题.如果ie在容器内你有一些abs元素,你必须拖放到它外面,你将无法在容器外看到它们.在这种特殊情况下你需要使用'clearfix'技巧;)

归档时间：	14 年，8 月前
查看次数：	9097 次
最近记录：	9 年，10 月前