CSS清除浮动万能float闭合

最新推荐文章于 2025-12-26 15:15:00 发布

转载最新推荐文章于 2025-12-26 15:15:00 发布 · 1.3k 阅读

文章标签：

#float #css #ie #html #class #div

前端开发&HTML5 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种简洁实用的方法来解决CSS布局中的浮动闭合问题。通过简单的代码实现，可以有效避免因未清除浮动导致的浏览器兼容性问题。

清除浮动，新手朋友往往不是很明白。如果不清除浮动对float进行闭合，在FF中往往会出错，本站有大量的文章进行过介绍。今天向大家推荐一个实例，非常简洁易用。

给需要闭合的DIV（class为clearfix）加上如下的CSS样式即可：

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

不过貌似这样有点麻烦，其实常用的是下面的：

.clear{clear:both;height:0px;overflow:hidden;}

另一种方法

<style>4 `4 p" D) R3 e0 O: t

/* Clear Fix */

.clearfix:after {

content:”.”;$ A  E$ F1 ?+ C* @7 c& ^: m

display:block;- G  g9 f1 |' z" M

height:0;0 O, G8 W! {- b( |

clear:both;

visibility:hidden;# W$ \- K2 Y4 C9 G. N

}: m! Z, h8 I5 j, n# |9 \

.clearfix {( J" I& o9 `6 A4 S

display:inline-block;) Q  U$ x% r5 d# y4 ^& j. _/ I! l4 @

}

/* Hide from IE Mac *// X8 A" W  Y5 B6 H3 o2 x. b

.clearfix {display:block;}  R6 `8 x: Q+ K* Z2 y. N

/* End hide from IE Mac */

/* end of clearfix */

</style>/ y% C  [) v5 m4 B, r# }# {
.clearfix:after{
 content:".";
 display:block;
 height:0;
 line-height:0;
 clear:both;
 visibility:hidden;
}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix{display:block;}
/* End hide from IE Mac */
/* end of clearfix */