测试inline元素float后是否会变为block元素
首先用span标签做下测试，贴上代码先
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试span float后是否会变为block元素</title> <style> body{ font:12px Arial, Helvetica, sans-serif; background:#FFF;}.d_a,.s_a{border:1px solid #CCC;}.d_a{width:300px;height:200px;margin:50px auto 0;} .s_a{float:left;background:#EEE;margin-left:10px;} </style> </head> <body> <div src="/img/2012/07/02/1602571601.png" alt="测试inline元素float后是不是会变为block元素" style="vertical-align: middle;" width="346">?
很明显.s_a的margin还是10相素，并没有出现IE6下两倍margin的情况！这是怎么回事，难道span float后还是inline，没有block吗？让我们继续深入测试，大家都知道inline元素给其加width、height是无效的，那么现在就简单了，要想证明span float后是否block只需再给span加上宽度或者高度试下，代码如下：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试span float后是否会变为block元素</title> <style> body{ font:12px Arial, Helvetica, sans-serif; background:#FFF;}.d_a,.s_a{border:1px solid #CCC;}.d_a{width:300px;height:200px;margin:50px auto 0;} .s_a{float:left;background:#EEE;margin-left:10px;width:200px;height:50px;} </style> </head> <body> <div src="/img/2012/07/02/1602571602.png" alt="测试inline元素float后是不是会变为block元素" style="vertical-align: middle;" width="339">?
很明显span float后宽度、高度对其有影响了，结果应该是span标签 float后block了，但是本身的inline并没有丢！（既可设宽度、高度，IE6中又没有出现双倍margin） 这里只测试了<span>我想<a>标签之类的其它inline标签也是同样的情况。最后再说明一点：本身自带inline元素的标签在float和margin同时使用的情况下，不用担心会出现双倍margin,并不需要再特意加上display:inline!