我們通常都根據父子元素之間的關系來討論浮動和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。
- 根元素
