CSS的float属性的覆盖

W3C
按照图片中所说，则运行结果只有两张图（一张被覆盖）但为什么实际不是这样的？

 <html>
<head>
<style type = "text/css">
#a {
float : left;
}
img {
display:block;
}
</style>
</head>
<body>

<img id = "a" src="/i/eg_mouse.jpg" width="50" height="50">


<img id = "b" src="/i/eg_mouse.jpg" width="50" height="50">


<img id = "c" src="/i/eg_mouse.jpg" width=50" height="50">

<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>

</body>
</html>

因为img标签是内联标签,不能直接写样式,加一个display:inline-block;属性试试,不行的话就用div包裹起来,再把div浮动

3个都要设置float:left

http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/
http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/

绝对定位的元素才是脱离了文档流，而浮动元素依旧在文档流中.

第二个图的float:left相当于只是让第二个图展示成内联元素的效果，出现在最左端，后面可以紧跟第3个图。脱离文档流是相对于其父元素来说，第二个图如果外面套了个div，图没有float时这个div是有宽度和高度的，但是float之后这个div的高度就会变成0。如果你要实现如上的图一覆盖图二的效果，则要用position：absolute;定位来实现。

img本身就是为了解决图文混排，所以浏览器碰见图片就不会重叠，我的理解

float只能提升半层文档流，运行以下代码，你会发现bbb的字体被挤出来了


div { } #a{background: red;float : left;width: 100px;height: 100px;} #b{background: green;height: 200px;width: 200px;}


aaa
bbb



float运行效果

这个问题的关键在于：需要设置为display:block。
你可以复制一下底下的代码，运行一下：

<html>
<head>
    <style type = "text/css">
    /*span*/
    .span {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    #spana {
        float: left;
    }
    /*div*/
    .div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    #diva {
        float: left;
    }
    </style>
</head>
<span class="span" id="spana">a</span>
<span class="span" id="spanb">b</span>
<span class="span" id="spanc">c</span>
<div style="clear:both"></div>

<br><br><br>

<div class="div" id="diva">a</div>
<div class="div" id="divb">b</div>
<div class="div" id="divc">c</div>
<div style="clear:both"></div>
</body>
</html>

运行结果如下：
图片说明

这就是行内元素与块状元素的区别。
如果你说你设置了img为display:block，那么我只能告诉你img是个例外，你只能把它包裹在外层是block的元素中才能看到效果。

运行如下代码：

 <html>
<head>
    <style type = "text/css">
    /*img*/
    img {
        display: block;
        width: 100px;
        height: 100px;
    }
    #a {
        float : left;
        z-index: 2;
    }
    /*div*/
    .div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    #diva {
        float: left;
    }
    </style>
</head>
<body>

<img id="a" src="images/1.jpg">
<img id="b" src="images/2.jpg">
<img id="c" src="images/3.jpg">
<div style="clear:both"></div>

<br><br><br>

<div class="div" id="diva"><img src="images/1.jpg"></div>
<div class="div" id="divb"><img src="images/2.jpg"></div>
<div class="div" id="divc"><img src="images/3.jpg"></div>
<div style="clear:both"></div>




</body>
</html>

最后的效果为：
图片说明