float在各浏览器下效果不同
2023-12-29 分类： 网站建设
从最初的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就是第二行的，它不会因为浮动元素而被挤到其它行。或者可以描述为“浮动元素会尽可能的插入它前面的行，但是不可能把前面行本身的行元素挤出去。”
这个代码中，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就是第二行的，它不会因为浮动元素而被挤到其它行。或者可以描述为“浮动元素会尽可能的插入它前面的行，但是不可能把前面行本身的行元素挤出去。”
网站标题：float在各浏览器下效果不同
网站路径：/news2/310902.html
成都网站建设公司_创新互联，为您提供网页设计公司、营销型网站建设、网站设计、自适应网站、电子商务、星空体育app最新版本(2024已更新)
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
猜你还喜欢下面的内容
- 高端网站建设要了解什么？从哪些方面？ 2023-12-29
- 网站关键词对网站优化的重要程度 2023-12-29
- 浅谈低龄创业化成为常态 2023-12-29
- 在网站建设中提升网站实用性的几个方法 2023-12-29
- 天津网站建设必须注意这几点，可以提高网站流量(天津模板网站建设服务) 2023-12-28
- 游戏预约页面网站的建设和开发有哪些基本步骤？ 2023-12-28
- 什么是共享主机和域名？为什么要在您的托管计划中设置多个域名？ 2023-12-28
- 成都网站建设--门户网站建设要点 2023-12-29
- emoji合成器制作网站(emojI合成器) 2023-12-29
- 企业网站如何“私人订制” 2023-12-29
- 成都餐厅和婚礼的网站设计服务 2023-12-29
- 自助建站平台何其多自带何种特质才能脱颖而出？ 2023-12-28
- 个人设计制作电商网站多少钱 2023-12-28
- 六种常见的企业网站首页设计的布局方式 2023-12-28
- 成都400电话申请，400电话如何计费 2023-12-28
- 盘点网站seo之优化必备技巧！ 2023-12-28
- 成都企业网站定制服务包含哪些内容 2023-12-28
- 网页艺术设计初步探讨 2023-12-28
- 网站seoCDN加速是什么意思？ 2023-12-28