使用 CSS 清理浮动和子元素的几个技巧 - 文章教程

使用 CSS 清理浮动和子元素的几个技巧

发布于 2018-10-21 字数 2587 浏览 1525 评论 0

网页布局中往往会使用到浮动,这样可以让更多的元素并排在一起,更网页的模块内容,但是因为高度有时候不适应,特别是低版本的浏览器上,会导致元素重叠或者错乱,可能是有时候忘记清除浮动了,可能是有时候没有给元素添加浮动导致的。

CSS 的 :after 和 :before 伪类可以为元素的前面和后面添加内容,这样的定义方法很酷,我们不必要添加额外的元素,就能实现相同的效果,同样我们在定义元素的浮动的时候,很多地方可能会出现错位,我们就可以使用这样的伪类来清除浮动,达到我们想要的效果。

A.K.A The “Clearfix” hack.

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

这个方法需要给元素添加 class="clearfix" 属性,这是一个改进的原始版本 记录在这里

更新的杰夫斯塔尔是清洁的,没有人用 IE 的基础上,对 MAC 的事实,这就是反斜杠都是。

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

再次更新 group 类的名称是更好的和更多的语义(通过Dan Cederholm)。内容属性甚至不需要空间,可以是空字符串(通过尼古拉斯加拉赫)。没有任何文字,字体大小是联合国需要(克里斯Coyier)。

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

当然如果你把 IE6 或 7 的支持,删除相关的线。

2011年5月18日更新:尼古拉斯加拉赫再次与“micro” clearfix。看到这additional stuff

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

八月2012更新:我想说的大部分这些天(如果你只需要IE 8以上)这是很好的:

.group:after {
  content: "";
  display: table;
  clear: both;
}

原文:http://css-tricks.com/snippets/css/clear-fix/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

nuj316

文章 0 评论 0

梦中楼上月下

文章 2 评论 0

kook

文章 0 评论 0

thousandcents

文章 0 评论 0

像你

文章 1 评论 0