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