A-A+

CSS中清除浮动最优方法

2015年08月07日 htmlcss 暂无评论 阅读 83 次

也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。

一、清除浮动 还是 闭合浮动 ?

很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。

  1. 清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none;
  2. 闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。

我们来看看下面例子,清除浮动和闭合浮动:

CSS代码如下:

#main {width:300px;height:auto;padding:10px;background:#ccc;}
#main .left {width:100px;height:50px;background:red;float:left;}
#main .right {width:100px;height:50px;background:blue;float:left;}                 
#footer {width:300px;height:20px;background:green;}

HMTL代码如下:

<div id="main">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>
</div>                              
<div id="footer"></div>

结果如图所示:
图片描述

二、解决这种问题有几种方法:

  1. 在父级添加 overflow:hidden
    优点:不存在结构和语义化问题,代码量极少
    缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素
  2. 父元素也设置浮动(加个float:left/right
    优点:不存在结构和语义化问题,代码量极少
    缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐使用
  3. 父元素设置 display:table
    优点:结构语义化完全正确,代码量极少
    缺点:盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用
  4. 使用 :after 伪元素
    优点:需要注意的是 :after 是伪元素,不是伪类(某些CSS手册里面称之为“伪对象”),很多清除浮动大全之类的文章都称之为伪类,不过csser要严谨一点,这是一种态度。
    由于IE6-7不支持:after,使用 zoom:1 触发 hasLayout。
    缺点:兼容性不是很好。
  5. 在浮动的元素后面添加空标签 <div class="clear"></div> 清除浮动
    优点:简单明了
    缺点:无意义的空标签,不利于语义化

小结

通过对比,我们不难发现,其实以上列举的方法,无非有两类:

其一,通过在浮动元素的末尾添加一个空元素,设置 clear:both属性,after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;

其二,通过设置父元素 overflow 或者display:table 属性来闭合浮动。
相关连接:http://www.qianduan.net/new-clearfix.html

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录