浮动元素后的非浮动元素问题

点击打开链接

浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在浮动元素“之下”显示。 

示例代码如下：

<div style= "width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;" >

<div style="float: left; width: 250px; height: 250px; border: solid 1px Aqua; background-color: gray;

margin: 10px  0  0  10px;">

浮动DIV</div>

<div style= "background-color: red; border: solid 1px green; width: 300px; height: 150px;" >

跟在浮动元素后边的DIV</div>

<span style= "background-color: red; border: solid 1px green; margin: 0 0 0 -50px;" >

跟在浮动元素后边的span</span>

</div>