Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

float到底做了什么?

  从最初的CSS开始就有float这东西了,虽然大家都一直在用,也没出现什么大不了的问题。但是float它到底对元素做了什么呢?如果突然要说float的具体行为也未必能说的出来,只是会用而已,不代表了解它。所以咱就来摸摸这个float的底,看看它有多少斤两。
  现在的float,运用最广的就是用来做布局。当年传的沸沸扬扬的所谓“DIV+CSS”布局实际上就是float布局。如果把容器内所有元素都float了,确实很容易操作。唯一要解决的就是容器高度问题,这个在之前的文章“float布局的几个常见问题解决”中已经说过了。
  但是float这个玩意儿出现的初衷不是用来给你布局的,而是让文章中的图片做文字环绕的。或者说,并不是一个容器能所有的元素都是float。它有可能和普通的行元素或块元素一起被放在容器中,这时候float的行为就没布局时那么简单了。这里的定义是,块元素是没有inline性质的元素,行元素是具有inline性质的元素。具体可以看“inline和block的基本性质”。现在我们先看float与块元素放在一起的性质。
<!DOCTYPE html>
<style>
.panel {width:200px;height:100px;background:#EEE;}
.panel div {height:20px;}
.e1 {background:#E99;width:100%;}
.e2 {background:#9E9;width:40%;}
.e3 {background:#99E;width:50%;}
</style>
<div class="panel">
  <div class="e1"></div>
  <div class="e2"></div>
  <div class="e3" style="float:left;"></div>
</div>

  这个代码中,e3并没有跑到第二行。因为e2是块元素,即使内容没有那么多,但是它的灵魂已经把整行都给占了。这时候float的e3就不会跑到第二行上,这就体现出了float的一个性质“float元素不会浮动到已经被占满的行上”。现在我们修改一下代码再做个测试。STYLE部分不变,只改后面的实体元素部分,把e3的float,放到e2上。 <div class="panel">
  <div class="e1"></div>
  <div class="e2" style="float:left;"></div>
  <div class="e3"></div>
</div>

  这样设置,e3就会跑到第二行上来了。不过这个代码在IE6、7下有个BUG(右边是IE7)。正常的浮动元素应该是和普通元素不在同一个深度的,所以在e3跑到第二行之后的效果应该是像左边的Chrome这样e2和e3重叠的。具体在IE6、7中是什么BUG这篇文章就不说了,现在只要知道有这个BUG,避开它就行了。如何避开呢?我们给e3也加上float就行 <div class="panel">
  <div class="e1"></div>
  <div class="e2" style="float:left;"></div>
  <div class="e3" style="float:left;"></div>
</div>

  float元素和普通元素重叠的效果显然不是我们想要的,如果要重叠会用绝对定位来做,一般不会用float。所以,我们需要的是让他们不重叠,因此给e3也加上float,让e2和e3在同一个深度上,这样就不会重叠了。同时也解决了低版本浏览器的兼容性问题。对于块元素,flaot的影响大概就是这些。接着咱来看行元素的情况。
<!DOCTYPE html>
<style>
.panel {width:200px;height:100px;background:#EEE;font-size:0px;}
.panel span {height:20px;display:inline-block;vertical-align:top;}
.e1 {background:#E99;width:100%;}
.e2 {background:#9E9;width:40%;}
.e3 {background:#99E;width:50%;}
</style>
<div class="panel">
  <span class="e1"></span>
  <span class="e2" style="float:left;"></span>
  <span class="e3"></span>
</div>

  和块元素的情况不同,行元素没有那个BUG。这就可以看出浮动元素的另一个性质“浮动元素永远不会和行元素重叠”。行元素不会和块元素重叠,也不会和浮动元素重叠。我们在使用float布局时清除浮动使容器保持高度就是使用了float的这个性质。它类似助溶剂的作用,让块元素和浮动元素更好的结合。不过行元素和float一起使用时在低版本浏览器中也有BUG,接着看代码
<!DOCTYPE html>
<style>
.panel {width:200px;height:100px;background:#EEE;font-size:0px;}
.panel span {height:20px;display:inline-block;vertical-align:top;}
.e1 {background:#E99;width:100%;}
.e2 {background:#9E9;width:40%;}
.e3 {background:#99E;width:50%;}
</style>
<div class="panel">
  <span class="e1"></span>
  <span class="e2"></span>
  <span class="e3" style="float:left;"></span>
</div>

  我们把e2的浮动换到e3上,正常的逻辑应该是像Chrome这样e3跑到e2的左边(左浮动)。这也是一个float的性质,这比较复杂,待会儿再说。看IE的行为显然很诡异,这就是IE6、7上的另一个BUG。这个BUG和上面的那个不太一样,因为它不容易解决。这个BUG的行为是“在IE7-下,一行中如果有浮动元素,那么所有的浮动元素都必须在非浮动元素之前”,例子中的e2是非浮动元素,由于它不在e3这个浮动元素之前,导致了e3无法在第二行成行,最终被换到了第三行。要解决这个问题我们只能根据BUG的行为来处理,也就是如果要让float元素和非float元素保持在同一行,就必须把float元素放在前面,非float放在后面。无论是左浮动还是右浮动都是一样的。
  现在再回头来看Chrome下的行为,由于e3是左浮动,所以跑到了e2的左边。也就是说,它是穿过了e2才跑到左边的。这就可以看出,flaot元素是可以穿过行元素的,但前提是float元素和被穿过的行元素的宽度总和要在一行之内。上面这个例子e3能穿过e2是因为e2和e3的宽度总和没超过行的宽度,也就是说他们放在同一行不会溢出来。如果我们把e2的宽度改成60%呢? .e2 {background:#9E9;width:60%;}
  60%+50%显然超过了100%,于是e3就无法再穿越e2了。因为e2就是第二行的,它不会因为浮动元素而被挤到其它行。或者可以描述为“浮动元素会尽可能的插入它前面的行,但是不可能把前面行本身的行元素挤出去。
  好啦,目前就总结了这些,暂时也没想到啥别的了~ (貌似我的文章结束总是很突兀。。)
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^