当前位置:首页 > 开发 > Web前端 > 前端 > 正文

清除浮动

发表于: 2012-03-09   作者:踮起脚尖   来源:转载   浏览:
摘要: 清除浮动的三种方法: 1.标签清除浮动 在浮动元素后加一个空标签,空标签上定义一个清除浮动的类: <style type="text/css"> .clear{ clear:both; height:0;overflow:hidden;} .float_left{ float:left; } .float_right{ float:left; } &l
清除浮动的三种方法:
1.标签清除浮动
在浮动元素后加一个空标签,空标签上定义一个清除浮动的类:
<style type="text/css">
.clear{ clear:both; height:0;overflow:hidden;}
.float_left{ float:left; }
.float_right{ float:left; }
</style>
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<br class="clear"></br>
空标签法简单有效,对浏览器的兼容性也很不错,空标签也不一定限于div,也可以是其他的标签p、span、br,值得注意的是在标准浏览器下这个空标签必须是块级元素,比如在使用span的时候就得将它转换成块级元素(display:block),在IE6/7下内联元素也可以。空标签法由于使用起来简单,受到广大新手朋友的青睐,我也时常为了省事,用这种办法。空标签法的缺点就是要多加一个额外的标签,这样HTML代码看起来就不够优雅,如果浮动元素较多,那么空标签也会很多
2.overflow
子级元素有浮动,可以给父级元素添加一个overflow:hidden或overflow:auto的CSS属性来清除浮动。
<style type="text/css">
.content{
overflow:hidden;
background:red;
}
.float_left{ float:left; }
.float_right{ float:left; }
</style>
<div class="content">
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
</div>
该方法可以兼容标准浏览器以及IE7+,对IE6无效。但overflow:hidden或overflow:auto属性的CSS元素如果内部有元素要定位到外面来的话就很杯具了
3.IE6/7的hasLayout

微软的IE6/7的渲染引擎都有hasLayout属性,很多兼容问题都是由此引起的,某些CSS属性触发了hasLayout也同样可以达到清除浮动的效果。结合上面提到的overflow,那么就可以实现兼容标准浏览器和IE6的清除浮动的效果。触发IE6/7的hasLayout的方法并可以用来清除浮动的方法有:

    1. 设置一个显式的高度或宽度(不能为auto)
    2. zoom:1
    3. display: inline-block (hack形式)
    4. float:left/right (hack形式)
float
子元素有浮动,给父元素也添加一个浮动(float:left),在标准浏览器下和IE6/7/8下都有效,但是这个父级元素浮动了又得清除父级元素的浮动,所以该方法的应用场景很受限制,不推荐使用。
:after
:after是一个伪类元素,经常与content结合使用,用来给元素的后面添加内容,该方法用来清除浮动可以兼容标准浏览器和IE8,IE6/IE7无效。
<style type="text/css">
.box{
zoom:1; /*兼容IE6/7的清除浮动*/
}
/*兼容标准浏览器*/
.box:after{
content:'.'; /*具体的值与清除浮动无关,尽可能的节省字符*/
visibility:hidden;/*不可见*/
display:block; /*设置成块级元素*/
height:0; /*0高度使其不占用布局空间*/
font-size:0px;/*兼容ie6,使其不占据布局空间*/
clear:both;
}
.box{
   zoom:1;
   background:red;
   }
.float_left{ float:left;}
.float_right{ float:left;}
</style>
<div class="box">
<div class="float_left">左</div>
<div class="float_right">右</div>
</div>
5.采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素;
.box{display:table}
或者
.box{display:table-cell}
6.使用 TABLE 以及 TD 标签作为浮动元素容器;
<table>
  <tr>
     <td>
       <div style=”float:left”></div>
    </td>
  </tr>
</table>
7.采用 float:left/float:right 方式将父元素同样浮动,就可以包含浮动内容;
当元素设置 float:left/float:right 时 ,同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。同时,这个样式也会在 IE 6/7 内触发 hasLayout 特性,拥有这个特性的元素也可以计算出浮动元素的高度,使父元素包含他们。
实际问题:
虽然这种方式并没有兼容问题,但实际使用中并不推荐。因为很容易推断出,页面中只要有一个浮动元素,使用该方法清理浮动将不可避免的使页面所有元素都浮动才可以达到预期效果。

清除浮动

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
浮动作为网页布局的重要手段之一,给我们带来了诸多便利。但一些副作用也是值得我们去注意的。一旦
很多前端都是用.clearfix:after{ .....} 和 .clearit{....}的组合 来清除浮动, 下面我来讲解下这俩
原文:http://www.iyunlu.com/view/css-xhtml/55.html 浮动(float),一个我们即爱又恨的属性。爱,
  在css2里,浮动(float)这个属性是个经典又诡异的一个属性,历来对它的争议就不断。 从语义上
原文链接:http://www.cnblogs.com/hongru/archive/2010/10/06/1844855.html 在css2里,浮动(float
“什么是CSS清除浮动? 网络上流行的说法是:在非IE浏览器(如Firefox)下,当容器的高度(height)
  在写css的时候,浮动清除是必不可少的。大多数时候可以借助后面的元素清除浮动,有些时候也要引
css清除浮动: 一、我们写html布局的时候经常使用float属性, 但是会发现一个问题,父元素撑不起来
在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DI
博客已经迁移至 萌萌的IT人 ,谢谢支持 -------------------------------------------------- 浮动
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号