关于float和overflow的理解

我们通常都根据父子元素之间的关系来讨论浮动和overflow，现在我将其进行同级元素之间的效果对比。
首先还是先提供我的两个例子，通过clear:left清除浮动的效果如下：

//html



//css
#d1{
  background:red;
  height:200px;
}
#d2{
  background:green;
  height:200px;
  clear:left;
}
#d3{
  background:grey;
  width:100px;
  float:left;
  height:230px;
}

效果图如下：

图1 clear:left

而将d2的css的clear:left使用overflow:hidden操作替代后的效果如下：

图2 overflow:hidden

其实通过overflow:hidden其实我感觉更像是不需要设置宽度的左浮动，从图2可以看到其实绿色区域元素表现是有点类似左浮动的效果的，不同的是如果给绿色区域元素设置float:left如果不设定width属性的话就会消失。
而对比之下，使用clear:float操作，更像是将div加入float的文档流，从而将灰色区域的浮动效果去除。

关于BFC实现的途径有以下四种：

• float的值不为none；
• overflow的值不为visible；
• position的值为fixed / absolute；
• display的值为table-cell / table-caption / inline-block / flex / inline-flex。
• 根元素