float在各浏览器下效果不同
发布时间：2025-12-17 点击：2
从最初的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就是第二行的，它不会因为浮动元素而被挤到其它行。或者可以描述为“浮动元素会尽可能的插入它前面的行，但是不可能把前面行本身的行元素挤出去。”
网站域名必须要备案吗？不备案会影响网站吗
5个步骤在短时间内写出高质量的文章
网站最常见的几种类型
域名发散与域名收敛
怎样选择一个稳定安全的服务器
建站常识知多少
微信定制开发如何选择服务商
孝感网站建设-网站系统设计
这个代码中，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就是第二行的，它不会因为浮动元素而被挤到其它行。或者可以描述为“浮动元素会尽可能的插入它前面的行，但是不可能把前面行本身的行元素挤出去。”
网站域名必须要备案吗？不备案会影响网站吗
5个步骤在短时间内写出高质量的文章
网站最常见的几种类型
域名发散与域名收敛
怎样选择一个稳定安全的服务器
建站常识知多少
微信定制开发如何选择服务商
孝感网站建设-网站系统设计
下一篇：网站的种类和特点