Question

请问为什么div浮动后没有把行内元素覆盖住

昨天写代码时发现一个问题，为什么div浮动后没有把前面的span标签给覆盖住，而是把span给水平挤过去了？





Answer 1

其实你这个问题和我很早学这个css的一个问题一样。既然浮动元素脱离了文档流，为什么文字会停在浮动元素的周边而不是跟浮动元素重合呢？

第一，浮动的目的。最初时，浮动只能用于图像（某些浏览器还支持表的浮动），目的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。

第二，绝对定位与浮动的区别。

绝对定位是将元素彻底从文档流删除，并相对于其包含块定位（包含块可能是文档中的另一个元素或者是初始包含块），元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，该元素再也不会影响其他元素的布局了。如果将元素A定位到左上角的话，元素B占据元素A之前的位置，与元素A重合在一起，并被元素A覆盖。CSS代码和效果图如下。

而浮动，会以某种方式将浮动元素从文档的正常流中删除，并把浮动元素向左边和右边浮动，不过它还是会影响布局，关于浮动的有许多规则，读者可自行阅读《CSS权威指南》一书，介绍地很详细。采用CSS的特有方式，浮动元素几乎“自成一派”，不过它们还是对文档的其余部分有影响。这种影响源自于这样一个事实：一个元素浮动时，其他内容会“环绕”该元素。如果将元素A向左浮动的话，CSS代码和效果图如下图所示。由此可见，浮动之后，文字跑到了元素A的右边，即实现了文字环绕浮动元素的功能（如果A不浮动的话，div是块级元素，不可能有两个div处在同一行）。

以上都是我自己所想，希望可以帮到初学者。如果有错误或者不妥的地方，也请高手指出，我定当改正，谢谢！！

Answer 2

首先将这些元素display:block;然后使用js获取元素的个数，接着动态设置这些元素的width就可以了。至于width的值就是div的width除以元素个数得到。

追问

我没有问这些，我问的是为啥div浮动后把span给挤过去了而不是直接覆盖掉