我们通常都根据父子元素之间的关系来讨论浮动和overflow，现在我将其进行同级元素之间的效果对比。
首先还是先提供我的两个例子，通过clear:left清除浮动的效果如下：
//html
<div id="d3"></div>
<div id="d1"></div>
<div id="d2"></div>
//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。
- 根元素
