BFC原理与应用解析-优快云博客

本文链接：https://blog.youkuaiyun.com/u010552788/article/details/50989412

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

有几点我很疑惑：
第一点：
这里写图片描述

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

   #div1 {float:left; background: red; height: 100px; width: 100px}
   #div2 {position: absolute; background: blue; height: 200px; width: 200px }
    </style>
</head>

<body>
  <div id="div1"></div>
  <div id="div2"></div>


</body>

明明给div2声明了position:absolute，那div2应该具有BFC特性了，为什么div2遮住了div1？
而把div2的overflow:hidden或者display:inline-block,都能得到我们想要的样子，div1不覆盖div2,如下：
这里写图片描述

第二点：对这句话不是很理解：“在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。”
对于float:right怎么解释？
是说右margin碰到border吗？

看了张鑫旭的慕课视频，可能得到了解答：
是不是所有的BFC属性都有如此表现？（详见上一篇文章，BFC规则）
答案：是，但是由于自身特性，表现不一；
ovreflow:hidden，自适应，但溢出不可见，限制应用场景；
float+float，包裹性+破坏性，无法自适应，块状浮动布局；
position：absolute，脱离文档流，自娱自乐；
display：inline-bolck，包裹性，无法自适应，IE6/7 block水平不相识；
display:table-cell，包裹性，但天生无溢出特性，绝对宽度也能适应。

自己对BFC的疑问