2012-11-2更新

关于清除浮动,下面的方法虽然有效,但已经有些旧了,建议大家看这篇文章推荐的清除浮动的方法

Which method of 'clearfix' is best?

浮动元素由于脱离了文档流,无法撑起其父元素的高度,如果父元素要显示背景或边框时就不能置之不理了。使浮动元素的父容器自适应高度的方法有三种:

方法中使用到的css定义

<style type="text/css">

.fl { float: left }
.cb { clear: both }

/*用于清除浮动的类*/

/*这是对Firefox进行的处理,因为Firefox支持生成元素,而IE所有版本都不支持生成元素*/
.clearfix:after {
     content:".";
     display:block;
     height:0;
     clear:both;
     visibility:hidden;
}

/* 这是对 Mac 上的IE浏览器进行的处理 */
.clearfix {
    display:inline-block
}

/* 这是对 win 上的IE浏览器进行的处理 */
* html .clearfix{
    height: 1%
}

/* 这是对display: inline-block;进行的修改,重置为区块元素*/
.clearfix {
    display:block
}

</style>

1. 让父容器同时浮动起来,例如:

<div class="fl">
     <div class="fl"></div>
</div>

缺点:父元素也浮动起来,影响后面元素的布局

2. 让浮动元素后面紧跟一个用于清除浮动的空标签,例如:

<div>
    <div class="fl"></div>
   <div class="cb"></div>
</div>

缺点:增加了一个空标签,破坏了语义化

3. 给父容器挂上一个特殊的class,直接从父容器清除浮动元素的浮动,例如

<div class="clearfix">
    <div class="fl"></div>
</div>
 

关于clearfix类的解释转载自 http://hi.baidu.com/%C4%CE%B6%F9nye/blog/item/5e0ed14bbaa99f2a09f7ef21.html

4条留言

  1. 你这边评论都没有提醒的。。邮件提醒什么的。。装个多说吧。。哪里都看得到了
    ,还有提交评论有点慢啊

    1. 提交慢是网速问题,邮件提醒有的,估计进你垃圾邮箱或者你邮箱收不到了,毕竟是国外服务器。多说我装过,又卸载了,不显示trackback伤不起,多说发的邮件我也没怎么收到过,后来发现全部进了垃圾邮箱,foxmail都不接收的那种。。

  2. 讨厌的浮动啊什么浏览器兼容性的。
    学html和css就是卡在这里才一直没学下去。

    1. 浮动还好说了,浏览器兼容性嘛,只要抛开ie6,还是可以接受的

评论功能已关闭