CSS: float: left（浮动）没有效果的两个原因

1、如果在一行上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。这时候可能你就会发现显示与你的预期效果不符道。

2、为某元素（A）设置float 表示浮动后，元素A 脱离文档流，不在文档流中占据空间，如果在A后面的元素没有float属性，很明显会显示在本该由A占据的位置上（因为专A脱离了文档流），这时候在一些情况下也可能你会发现显示与你的预期效果不符。这时候可以使用 在A之后使用 clear属性（如clear:left） 来清除浮动。

小提示（文档流和文本流）：

文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的
元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。
但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。
当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念。