|
一、什么是BFC？ BFC是頁面上的獨(dú)立渲染區(qū)域
二、BFC產(chǎn)生規(guī)則 1、根標(biāo)簽(html) 2、float的值不為none 3、overflow的值不為visible 4、display的值為inline-block 5、position的值為absolute或fixed
三、BFC的特性 1、屬于同一個(gè)BFC的兩個(gè)塊元素，垂直margin兄弟關(guān)系會(huì)折疊（正數(shù)以大值為準(zhǔn)，有負(fù)數(shù)正常加減），父子關(guān)系會(huì)塌陷。 2、BFC區(qū)域不會(huì)與float的標(biāo)簽區(qū)域重疊。 3、浮動(dòng)的標(biāo)簽也會(huì)被計(jì)算BFC高度。 4、BFC是獨(dú)立容器，內(nèi)部標(biāo)簽不會(huì)影響到外部標(biāo)簽。
四、可以解決的問題 1、外邊距折疊/塌陷： 父子關(guān)系在父級(jí)加overflow:hidden，父級(jí)加border，父級(jí)加高度 弟關(guān)系給其中一個(gè)兄弟設(shè)置成獨(dú)立的BFC。 2、自適應(yīng)兩欄或三欄布局 兩欄：左邊固定高度設(shè)置float，右邊不設(shè)寬設(shè)置BFC 
<html> <head> <style> .left { width: 100px; height: 400px; background: red; float: left; } .right { height: 500px; background: yellow; overflow: hidden; } </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 三欄：左右固定高度設(shè)置float，中間不設(shè)寬設(shè)置BFC
<html> <head> <style> .left { float: left; height: 500px; width: 150px; background: red; } .center { height: 600px; background: blue; overflow: hidden; } .right { float: right; height: 500px; width: 150px; background: yellow; } </style> </head> <body> <div class="left"></div> <div class="center"></div> <div class="mid"></div> </body> </html> 3、防止文字環(huán)繞 給文字設(shè)置成BFC可以解決文字環(huán)繞 4、清除浮動(dòng) 給父級(jí)設(shè)置成BFC可以清除浮動(dòng)，⑤浮動(dòng)的標(biāo)簽也會(huì)被計(jì)算BFC高度。
|
|
|
