Question

关于css浮动覆盖的问题

浮动的定义:
"浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。"

比如我有两张图片，图a不浮动，图b向左浮动。那根据定义，图a作为普通流块框应该被图b覆盖才对，可是实际上并没有被覆盖。这是为什么呢？
代码：
<style>
img.left {float:left}
</style>

<img src="a" />
<img class="left" src="b">

根据定义，图a就是普通流的块框，表现得就像图b不存在一样，应该就是被图b覆盖或者覆盖图b，可是为什么并没有覆盖而是并排的？

Answer 1

html元素有几个是块级元素如p,h1-h6等，这些元素自带display block属性，元素间相当于会有一个换行符不能同排排列，除非定义浮动。而img是内联块元素也就是display inline-bloack，可以并排显示的。 两个元素一个加了浮动一个没加浮动，只会是浮动的优先排列在左或者右，也就是没有浮动的元素会被有浮动的拆队。除非2个元素都是浮动的他们才会老老实实的按顺序排在一起。浮动不是覆盖只是位置的先后罢了，便于将不同类型的元素并排。css里没有覆盖之说。你写的例子最终效果就是b图排在a图左边而已。

追问

谢谢你的回答，实际确实两张图是并排的

但是下面这张从w3school.com.cn的教程说是覆盖的，不知道是教程错了吗？

参考：http://www.w3school.com.cn/css/css_positioning_floating.asp

追答

这个是文档流，不是块级元素，块元素怎么都不会被覆盖。文档流因为没有实实在在的区域所以会被覆盖，就向水一样。而块级就象肥皂一样。display:block 这个属性你在熟悉下吧。

追问

框1和框2不是块级元素吗？

追答

不是，他只定义边框样式和宽高而已，不信你自己写写试试就知道了。给他加个display:block属性保准不被覆盖。

<div style="border:1px solid #ddd;width:80px;height:80px;float:left">框1</div>
<div style="border:1px solid #ddd;width:80px;height:80px;">框2</div>
<div style="border:1px solid #ddd;width:80px;height:80px;">框3</div>

追问

把你的代码复制了，框1覆盖了框2

div怎么不是块级元素？

Answer 2

为啥我的是一列地排，是不是我的图片太宽了？

Answer 3

上一下这部分的html代码看看

追问

上了