`
hl756799782
  • 浏览: 76998 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

关于浮动与清除浮动(转)

阅读更多

原文链接:http://www.cnblogs.com/hongru/archive/2010/10/06/1844855.html

 

在css2里,浮动(float)这个属性是个经典又诡异的一个属性,历来对它的争议就不断。

  从语义上讲

  float这个属性顾名思义,既然叫浮动,咱们不妨把它与船体在水中的浮动联系起来。即可以这样假设,document为一个水 箱,document的文档流就是水箱里的一层水,这层水的厚度无限接近于零,而所有在文档流中的元素都是在这层水中进行排列的,他们都有各自的占位空 间,所以不允许有任何的交叠。

  而,float浮动,就恰好使原本在文档流这层水中的元素浮于水的表面(即脱离的文档流),说法不一定准确,因为浮动是否是真正的脱离的文档流 还有待考究。一旦脱离的文档流后,该元素的占位空间自然也就没有了,但是这里会有一个诡异的地方,所谓的没有占位空间,那么就应该是元素可以自由的交叠。 比如像position:absolute的那种。但是对于浮动的元素而言,会稍微有些区别。

  浮动的元素,高度会塌陷,这可以理解为占位空间消失造成的,同时高度塌陷也是我们布局中需要清除浮动的最重要的原因之一。但是浮动的元素宽度却处在一个“半塌陷”的状态,为什么说是“半塌陷”呢?请看下面图例:

这是在没有浮动的情况下,上面代码表现。

如果灰色的区域左浮动的话,会是下面的表现:

且慢,如果说宽度的占位还在的话,那么我们不妨对<p>标签设置个margin-left或者padding-left看看如下:

其实运行结果和没有设置padding值一样的。除非padding-left或者margin-left的值大于浮动块宽度(200px)时,我们再看看:如下:

这下可以看出来了,这就是我说“半塌陷”的原因,说是没塌陷吧,那么<p>元素就应该距浮动灰块250px才对,说是塌陷了吧,那 么<p>在没有padding-left和margin-left值的时候都应该和浮动块重叠才对。这是float的诡异处之一。

  按本人的理解,其实可以这样解释这个现象,这里要引入一个自创的词:“占位空间层级”。是的,引入占位空间层级这个概念之后,针对float这 个元素,我们不妨可以这样假定:没有浮动的元素(即在文档流中的)的占位空间层级为0,有浮动的元素(指float:left或right;不包括 none)的占位空间层级为1。这样就可以解释刚才我们的<p>的padding和margin值都是在层级为0的占位空间中解析的,而所有 的浮动元素由于都在同一个层级的占位空间中,所以浮动元素之间的margin和padding值的解析是和我们正常理解是一致的。至于为什 么<p>不和浮动块重叠,那是因为占位空间层级的分界线和文档流基线不是同一个!以下为一个简易的示意图:

  清除浮动:

  说了这么多浮动的东西,其实我们平时接触最多的问题,还是清除浮动的问题。当初css的发明者之所以会创造clear这个属性,就是因为 float太过诡异,与文档流的层级标准都不统一,导致很难包容float所导致的负面影响,所以只能再造一个clear属性,强制清除float带来的 后遗症。

  说到这里,我很同意一为同仁说的,我们平时说的“清除浮动”准确的说应该是“清除浮动造成的影响”,真正的清除浮动应该是float:none; 

  说到清除浮动造成的影响,又不得不说一下Dom元素的“包裹性”,因为在我们的实际编码中,用clear来清除浮动已经很少见了。我记得很早 前,那时候清除浮动就是在需要清除浮动的元素下面加个空元素,然后样式设置为clear:left或者right或both,但在如今越来越讲究web标 准以及代码结构和语义化的时代,用空标签这种既破坏结构有没语义的方法已经显得很傻很天真了。因为经过人们不懈的实践,发现用包裹性来清除浮动造成的影响 是更好的一种方式。

  其他的先不多说,先看看除了空标签清除浮动外的其他几种方式吧。

/* 通过overflow的方式 */
.overflow-clear{
    overflow:auto;/*或者 hidden,scroll,不包括visible */
    _height:1%; /*设置高度是为了ie6获取haslayout */
}
/* display 的方式*/
.display-clear{
    display:inline-block;
}
/* position的方式 */
.position-clear{
    position:absolute;
}
/* 浮动方式 */
.float-clear{
        float:left; /*或者right,不是none就行*/
}
/*zoom 的方式*/
.zoom-clear{
    zoom:1;/* only for IE6.7 因为他们haslayout,ie8以后和标准浏览器都弱化了haslayout */
}
/*after伪类+content方式*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
.clearfix {height: 1%;}
/* End hide from IE-mac */
上面几种方式都有清除浮动影响的作用,前四种是和最后一种在ie678和其他标准浏览器下都有效地方法,zoom因为用到了ie的haslayout,所以只在ie6/7的内核下才有效。

  随便举一例,如下:

 

<div class="overflow-clear" style="padding:10px;border:2px solid #999">
    <div style="float:left;width:200px;height:200px;background:#ccc;"></div>
    <p style="margin:0;padding-left:250px">我是文案</p>
</div>

运行的结果如下:

 

可见确实是清除了浮动造成的影响。同样的可以试试其他的几种方式。

  清除浮动原理-包裹性:

  说到包裹性,在这里面的鼻祖应该算是diaplay:inline-block;其他的像 overflow,position:absolute,float这几个产生包裹性的原因,本质应该都是因为他们使Dom元素具有了类似inline- block的性质,所以,凡是设置了像display:inline-block或者overflow:hidden/scroll/auto或者 position:absolute或者float:left/right这几个属性时,他们具有的包裹性都可以清除他们子元素浮动造成的影响。

  -haslayout

  这是ie私有的一个东西,不过随着ie8像标准浏览器靠近,它对haslayout的解析也弱化了很多。我们来看看用overflow,zoom,和after伪类这几个清除浮动的方式。

  通过测试可以看到,display:inline-block,position:absolute,float:left/right 都把包裹性演绎的很好,但是overflow对包裹性的演绎没那么到位,所以导致ie6下必须强制获取Dom元素的haslayout才能生效。

  在ie下,只要我们对一个非inline级别的元素设置width或者height都可以触发他的haslayout,而且,在windows 的ie下有个“auto-clearing”的特性:只要给容器一个尺寸,它能使容器自 动扩展以便适应它所包含的内容,即便给它的尺寸非常小,所以1%的height在任何情况都是扩展高度适应它的内容。这就是为什么在第一种方法中加了个 ie6的hack是height:1%;原因。

  同理,最后一个通过after伪类+content的方式最后要加个height:1%;也是这个原因。因为:after+content 只有在ie8和标准浏览器中支持。

  那么zoom,这个就不用多说了,这个是触发haslayout最典型的一种方式...

分享到:
评论

相关推荐

    HTML5 清除浮动

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

    Float浮动与清除浮动

    浮动(Float)是CSS布局中一个重要的概念,用于创建网页元素的水平排列,尤其是在传统的流式布局中。...需要注意的是,不同清除浮动的方法适用于不同的场景,开发者应根据项目需求和浏览器兼容性选择合适的方法。

    css中3种清除浮动方法

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

    清除浮动动态演示.html

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

    HTML浮动与定位

    ### HTML浮动与定位知识点详解 ...以上内容涵盖了HTML中关于元素浮动与定位的基本知识点,这些技术在网页布局中起着至关重要的作用。通过合理使用浮动与定位,可以创建出更加灵活和动态的网页布局。

    清除浮动示例_xiongxiong.html

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

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

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

    CSS清除浮动_清除float浮动 - DIVCSS5.htm

    具体详细的阐述了css浮动如何解决和浮动产生的原因。

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

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

    浅谈css中浮动和清除浮动带来的影响

    1. **隔墙法**(clearfix):在需要清除浮动的元素前添加一个无内容的空元素,如`&lt;div class="clearfix"&gt;&lt;/div&gt;`,并为`.clearfix`类设置样式`clear: both;`。这种方法在早期被广泛应用,但现在已逐渐被更现代的解决...

    清除浮动.pdf

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

    CSS浮动与清除浮动

    今天是第一次写博客,已经迫不及待地想把这周在逆战班学习的内容分享一下,这是我对css浮动与清除浮动的理解,希望可以帮助你。 CSS浮动与清除浮动( 本文以div元素布局为例。) 前言:由于CSS内容比较多,只能有...

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

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

    清除浮动.docx

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

    div+css清除浮动

    div+css清除浮动

    清理浮动的几种方法

    这将使新元素清除之前的所有浮动,从而使父容器的高度包含浮动元素。例如: ```css .clear-float { clear: both; } ``` 2. 使用伪元素`:after`清除:在CSS中为父元素定义`:after`伪元素,设置`content`、`...

    浮动清除常见方法

    这个资源为前端开发布局中浮动布局的浮动清除常见方法,

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

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

Global site tag (gtag.js) - Google Analytics