首页客户案例高端网站建设SEO优化小程序APP开发抖音 X 获客网络营销关于动态联系咨询

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就是第二行的,它不会因为浮动元素而被挤到其它行。或者可以描述为“浮动元素会尽可能的插入它前面的行,但是不可能把前面行本身的行元素挤出去。”

日期:2015年04月17日

标签: 广州网站设计公司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作 、 高端网站设计 、 高端网站建设 、 广州高端网站设计 、 广州高端网站建设

获取您的项目定制及优化报价。

* 为广州天河、白云、海珠、番禺、花都、南沙区提供网站建设服务。
微信二维码15876521776免费获取诊断报告