哪种clearfix方法？

发布于 2024-09-09 05:13:40 字数 375 浏览 4 评论 0原文

/* 清除修复 */

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

或

.clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}
* html .clearfix, *:first-child+html .clearfix {zoom:1;}

哪个效果最好？我现在用的是第一个，从来没有遇到过问题。谢谢。

原文

/* Clear Fix */

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

.clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}
* html .clearfix, *:first-child+html .clearfix {zoom:1;}

Which would work the best?
I used first one by now and never had an issue..
Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

゛清羽墨安 2024-09-16 05:13:40

最简洁的技术是为现代浏览器设置溢出：隐藏：

overflow:hidden;
zoom:1;

如果元素需要流出尺寸（负边距或定位），则clearfix：

#el:after { content:""; clear:both; display:block; visibility:hidden; }

对于IE6及以下版本，您需要触发hasLayout（通过宽度，缩放：1，高度和其他属性/值组合）。从 IE7 开始，溢出将清除浮动。

Most succinct technique is setting overflow:hidden for modern browsers:

overflow:hidden;
zoom:1;

If an element needs to flow out of the dimensions ( negative margins or positioning ) then clearfix:

#el:after { content:""; clear:both; display:block; visibility:hidden; }

For IE6 and below, you need to trigger hasLayout ( through a width, zoom:1, height, and other property/value combos ). Starting with IE7, overflow will clear the floats.

回复收藏 0 原文

谁许谁一生繁华 2024-09-16 05:13:40

后者似乎没问题，因为它也考虑了 IE6 (zoom:1;)。

回复收藏 0 原文

音盲 2024-09-16 05:13:40

这一直对我有用。与你的非常相似

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

This has always worked for me. Very similar to yours

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

回复收藏 0 原文

~没有更多了~