`
踮起脚尖
  • 浏览: 6226 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

清除浮动

    博客分类:
  • css
阅读更多
清除浮动的三种方法:
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 特性,拥有这个特性的元素也可以计算出浮动元素的高度,使父元素包含他们。
实际问题:
虽然这种方式并没有兼容问题,但实际使用中并不推荐。因为很容易推断出,页面中只要有一个浮动元素,使用该方法清理浮动将不可避免的使页面所有元素都浮动才可以达到预期效果。
分享到:
评论

相关推荐

    HTML5 清除浮动

    清除浮动是一个解决CSS布局问题的关键技术,特别是当我们在处理浮动元素时。 在CSS中,浮动(float)属性主要用于创建多列布局或让文本环绕图像。当一个元素被设置为浮动,它会脱离正常的文档流,向左或向右移动,...

    css中3种清除浮动方法

    为了解决这个问题,CSS提供了多种清除浮动的方法。本文将详细讲解三种清除浮动的方法。 1. **传统方式:添加额外的 clearing div** 在浮动元素之后,可以添加一个额外的`&lt;div&gt;`并为其设置样式`clear: both;`。这...

    清除浮动和解决margin的塌陷的方法

    浮动的原理 ,介绍清除浮动几种方法。以及margin塌陷的产生和解决margin的塌陷的方法

    清除浮动动态演示.html

    浮动的属性虽然方便使用,但是在使用这种属性时,也存在着一种弊端,那就是当子元素设置了float属性之后,且父元素的宽度没有设置...所以这里我们说的清除浮动,指的是清除子盒子添加浮动效果后造成的父盒子高度塌陷。

    导航条字体加粗 清除浮动 minyout 4.390v

    COME-IN FROM 导航条字体加粗 清除浮动 minyout 4.390v.

    清除浮动示例_xiongxiong.html

    浮动的属性虽然方便使用,但是在使用这种属性时,也存在着一种弊端,那就是当子元素设置了float属性之后,且父元素的宽度没有设置...所以这里我们说的清除浮动,指的是清除子盒子添加浮动效果后造成的父盒子高度塌陷。

    清除浮动.pdf

    解决这个问题,通常需要采用一些技术来“清除浮动”。 1. **清除浮动(Clearing Floats)**: - 最传统的方法是在父容器内部添加一个额外的标签,如`&lt;div class="clear"&gt;&lt;/div&gt;`,并设置`clear: both;`。这种方法...

    清除浮动的几种方法PPT学习教案.pptx

    清除浮动的几种方法 清除浮动是指在CSS中,浮动元素脱离文档流,导致父级元素无法自动获取到高度的问题。清除浮动是每一个web前台设计师必须掌握的机能。下面将介绍几种清除浮动的方法: 1. 对父级设置适合的CSS...

    css清除浮动的方法有哪些?.docx

    CSS清除浮动是为了应对浮动元素对周围元素布局的影响,特别是防止父元素因子元素浮动而高度塌陷的问题。在Web开发中,有多种方法可以清除浮动,以下将详细介绍四种常见的清除浮动的方法。 一、使用带有`clear`属性...

    xhtml+css清除浮动的3种方法

    ### XHTML + CSS清除浮动的三种方法 在XHTML与CSS页面重构过程中,处理浮动元素是一项关键技术。当元素被设定为浮动后,它们会脱离正常的文档流,并向左或向右移动,直到碰到容器边缘或其他浮动元素。这为布局带来...

    CSS技术:清除浮动的最优方法.pdf

    因此,需要使用清除浮动的技术来解决这一问题。本文档将探讨清除浮动的多种方法,并分析其优缺点,以找出所谓的“最优方法”。 首先,浮动(float)属性是CSS中用于布局的主要属性之一。当元素设置为浮动状态时,它...

    清除浮动.docx

    为了解决这个问题,有多种清除浮动的方法。 1. **传统方法:额外元素清除** 这是最原始的方法,即在父容器内添加一个额外的元素,通常使用`&lt;div class="clear"&gt;&lt;/div&gt;`,并为其设置样式`clear:both`。这样,这个...

    CSS清除浮动_2种方法源代码.zip

    本文将详细讲解两种常见的CSS清除浮动的方法,并通过提供的源代码进行实例解析。 ### 方法一:clearfix类 `clearfix` 类是最常用的清除浮动方法之一,它并不需要添加额外的HTML元素,而是利用CSS伪类来解决。这种...

    H5 溢出隐藏和缩略图和清除浮动

    在本话题中,我们将探讨“H5溢出隐藏”、“缩略图”和“清除浮动”这三大关键概念,以及它们在实际网页布局中的应用。 一、H5溢出隐藏 在H5中,“溢出隐藏”是通过CSS来实现的一种布局技巧,用于处理内容超出容器...

    div+css清除浮动

    div+css清除浮动

    清除浮动的几种方法.md

    清除浮动的几种方法.md

    浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么

    我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除...

    CSS的clear属性清除浮动的基本用法示例

    清除浮动是指通过CSS样式来防止浮动元素对周围元素的影响,确保非浮动元素或后续元素能够正确地在页面上定位,避免内容溢出容器。这通常是为了恢复父容器的正常高度计算,使其能完全包裹住内部的浮动元素。 **使用`...

    css 完美清除浮动的两种解决方案

    为了解决这个问题,我们通常需要“清除浮动”。本文将介绍两种常见的清除浮动的方法:使用`clear:both`和使用伪元素。 1. **使用`clear:both`** 在HTML中,我们可以创建一个空的`div`元素,并为其添加`clear:both`...

Global site tag (gtag.js) - Google Analytics