css中clearfix清除浮动的用法

最新推荐文章于 2023-03-18 17:17:04 发布

jkpi888

最新推荐文章于 2023-03-18 17:17:04 发布

阅读量5.4k

点赞数

分类专栏： css 文章标签： css clearfix

本文链接：https://blog.csdn.net/studyofnet/article/details/14164223

版权

css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

clearfix的定义：

.clearfix:after {}{       
    content: ".";     /**//*内容为“.”就是一个英文的句号而已。也可以不写。*/
    display: block;   /**//*加入的这个元素转换为块级元素。*/
    clear: both;     /**//*清除左右两边浮动。*/
    visibility: hidden;      /**//*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
    line-height: 0;    /**//*行高为0；*/
    height: 0;     /**//*高度为0；*/
    font-size:0;    /**//*字体大小为0；*/
}

.clearfix {}{ *zoom:1;}   /**//*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/

.clearfix的原理：

1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。

2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

3、在需要清除浮动的时候，只要写一个.clearfix就行了，然后在需要清浮动的元素中添加clearfix类名就好了。

.clearfix的实例


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>清楚浮动</title>

<style>

*{padding:0px; margin:0px;}

ul{border:3px solid #F00;}

ul li{width:50px; height:50px; float:left; background-color:#00F; list-style:none; margin-right:10px;}

/*

---------------------------------------------



采用伪类:after进行后续空制的高度位零的伪类层清除

---------------------------------------------

*/

.clearfix_after{zoom:1;}

.clearfix_after:after{

    content:"";

    display:block;

    height:0;

    line-height:0;

    clear:both;

    visibility:hidden;

}

</style>

</head>

<body>

<ul class="clearfix_after">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body> 
</ html>

参考资料： css用clearfix清除浮动 http://www.studyofnet.com/news/196.html

jkpi888

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中clearfix清除浮动的用法

clearfix的定义： .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已。也可以不写。*/ display: block; /**//*加入的这个元素转换为块级元素。*/ clear: both; /**//*清除左右两边浮动。*/ visibility:
复制链接

扫一扫