标签：
其中第4条：BFC的区域不会与float box重叠
<style type="text/css"> .first{ width:100px; height:100px; background-color:red; float:left; } .second{ width:200px; height:200px; background-color:blue; overflow: hidden; /*position:absolute;*/ } </style> <body> <div class="first"></div> <div class="second"></div> </body>
按照上述的写法，两个div确实没有发生重叠，并且按照预期的那样水平排放。
<style type="text/css"> .first{ width:100px; height:100px; background-color:red; float:left; } .second{ width:200px; height:200px; background-color:blue; /*overflow: hidden;*/ position:absolute; } </style> <body> <div class="first"></div> <div class="second"></div> </body>
随后，将second中生成BFC的元素overflow:hidden改为position:absolute;.这时候将，看到second将first覆盖了
。
看来，绝对定位还有点奇怪。
随后，于是我给蓝色块中添加一个小块，并给出绝对定位。
代码如下：
<style type="text/css"> .first{ width:100px; height:100px; background-color:red; /*float:left;*/ } .second{ width:200px; height:200px; background-color:blue; /*overflow: hidden;*/ /*position:absolute;*/ } .second-1{ width:100px; height:100px; background:green; } </style> <body> <div class="first"></div> <div class="second"> <div class="second-1"></div> </div> </body>
而从样式可以发现
绿色的小DIV并没有定位到想象中的页面左上角去，而是停留在他原来的位置。
这时候只要给绿色的小DIV的样式添加一个top:0;left:0;才会跑到页面左上角去。
这说明，只给出position:absolute;只让该元素脱离了普通文档流，而并没有改变他的位置
结论：给定一个元素position:absolute;而不给出top与left值，它就会去先找父元素并定位，随后，给出top与left值之后所呈现的位置才是定义的样式。
个人理解，如有不足，还请指教
标签：
原文地址：http://www.cnblogs.com/Changero/p/4802427.html
