CSS图片在父元素内部浮动，为什么文字会环绕而不是被覆盖，原理分析

既然浮动元素脱离了文档流，为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合？
第一，绝对定位与浮动的区别。绝对定位是将元素彻底从文档流删除，并相对于其包含块定位（包含块可能是文档中的另一个元素或者是初始包含块），元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，该元素再也不会影响其他元素的布局了。如果对元素A使用绝对定位的话，元素B占据元素A之前的位置，与元素A重合在一起，并被元素A覆盖。如图所示。

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

但是这儿有一小问题，如果你仔细观察CSS代码的话和效果图的话，会发现元素B的背景和元素A的背景重合了一部分。这就是用来解释为什么说浮动元素脱离了正常的文档流但是还会影响布局的原因。之所以说元素A脱离了文档流，是因为元素B确实占据了元素A之前的位置，好像元素A已经不存在了似的。只所以说会影响布局，是因为元素B里的文字并没有随之占据元素A的位置，而是环绕在浮动之后的元素A旁边。这是为了避免元素A将元素B里的文字覆盖了，这恰好就是浮动的目的！

另外关于图片没有浮动时，在文字上半部分插入图片，按下边对齐，在文字下半部分插入，按图片top边对齐。
另外关于图片文字环绕，可以简化过程，文字是一种特殊的元素，遇到浮动元素浮动，围绕在浮动元素周围，遇不浮动元素，文字也不浮动。

另外，浮动元素只对i自身和后面的元素有影响，对前面的元素没有影响，元素浮动后脱离了文档流。另外，绝对定位和固定定位也会脱离文档流，固定定位不会随着滚动条滚动而滚动，直接固定在了页面的某一个位置。要注意绝对定位的子爵父相，和在父元素中居中的问题。 一般绝对定位元素在父元素中居中，是采用top：50%，在margin-top负的直接高度的一半，水平方向同理。