問(wèn)題：css中清除浮動(dòng)的方式有哪些？
答：
1、 clear:both
2、給父級(jí)添加樣式 overflow:hidden
3、父級(jí)也使用float:left，二者都浮動(dòng)起來(lái)
4、給父級(jí)一個(gè)固定高度（使用場(chǎng)景有限，必須知道父級(jí)高度）
5、不拉不拉一大堆.....問(wèn)題：上面說(shuō)的第二種方式，給父級(jí)設(shè)置 溢出隱藏，為什么能夠起到清除浮動(dòng)的效果？
答：因?yàn)橛|發(fā)了bfc
問(wèn)題：哪些屬性會(huì)觸發(fā)bfc效果呢？
答：......
針對(duì)上面的問(wèn)題，做下研究及總結(jié)：
BFC: 全稱(chēng) Box Formatting Context（塊級(jí)格式化上下文）
它是一個(gè)獨(dú)立的渲染區(qū)域，
重點(diǎn)： 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算；內(nèi)部的box會(huì)在垂直方向，一個(gè)接一個(gè)地放置；BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素
哪些屬性會(huì)生成BFC？
- 根元素
- float屬性值不為 none
- position屬性值為 absolute或fixed
- display屬性值為inline-block, table-cell, table-caption, flex, inline-flex
- overflow值不為visible
現(xiàn)在回到上面的問(wèn)題，第二種和第三種實(shí)現(xiàn)方式，都會(huì)觸發(fā)BFC，所以問(wèn)題得以解決。
反推：是不是只要觸發(fā)了BFC，就能實(shí)現(xiàn)浮動(dòng)的清除？
答案是肯定的
外層div的樣式
內(nèi)層div樣式
根據(jù)上面所說(shuō)的幾個(gè)屬性都試過(guò)了，確實(shí)是能夠?qū)崿F(xiàn)清除浮動(dòng)的。
題外話：哪些樣式屬性會(huì)觸發(fā)瀏覽器重繪或重排？
查看網(wǎng)站 csstriggers
圖中已標(biāo)出屬性觸發(fā)的場(chǎng)景
