生活随笔
收集整理的這篇文章主要介紹了
对BFC的一点认识
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
首先讓我復習一下塊級元素（block）和內(nèi)聯(lián)元素（inline）
塊元素(block)的特點：
block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。block元素可以設置margin和padding屬性。內(nèi)聯(lián)元素(inline)的特點：?
inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。inline元素設置width,height屬性無效。inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果。BFC是什么？
那么什么是bfc呢，翻譯一下叫Block?Formatting Context，Block就是塊級元素，Formatting Context是一個抽象的概念，它指的是頁面中一個渲染區(qū)域，并擁有一套渲染規(guī)則，它決定了在區(qū)域中的子元素如何定位和其他元素的相互關系和作用，那么顯然BFC的意思就是一個針對block元素的規(guī)則區(qū)域（越接觸代碼越覺得自己是在創(chuàng)造世界，那么BFC就是一個為block元素創(chuàng)造的世界，這個世界有一套規(guī)則在規(guī)定它的行為）
BFC中的渲染規(guī)則？
block元素在垂直方向上一個個排列，每個元素的左外邊距與包含塊的左邊界相接觸；（原來塊級元素的特點是BFC賦予它的）block元素垂直方向上的margin會重疊。（完整的說法是：屬于同一個BFC的倆個相鄰的塊級元素的margin會發(fā)生重疊，與方向無關，但是因為block元素獨占一行，它們的左右margin沒有機會重疊。）BFC區(qū)域不會與浮動元素重疊，計算BFC區(qū)域高度的時候會把浮動元素的高度計算在內(nèi)（這是over-flow：hidden清除浮動的原理）BFC作為一個獨立的渲染區(qū)域，容器里面的元素不會影響外面，外面的元素也不會影響里面 <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document
</title>
</head>
<style>html * {margin: 0;padding: 0;}body{margin: 20px;border:1px solid}div {margin: 20px 0;height: 20px;background: red;}
</style><body><div>我是block元素
</div><div>我是block元素
</div><div>我是block元素
</div><div>我是block元素
</div>
</body></html> View Code 讓我們舉個栗子，一開始我無法理解我什么都沒做，怎么頁面就呈現(xiàn)了BFC規(guī)則下的狀態(tài)，原來我們的根元素html就是一個BFC區(qū)域，而body元素則作為包含塊存在，如上就可以很清晰的看到div在垂直方向上一個個排列，并且左邊界與包含塊body的左邊界相接觸，它們之間的margin重疊，只有20px；
現(xiàn)在來驗證一下html是不是一個BFC區(qū)域和規(guī)則的第三條，我們將div設為float：left；
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document
</title>
</head>
<style>html * {margin: 0;padding: 0;}div {float: left;height: 20px;background: red; }
</style><body><div>我是float元素
</div>
</body></html> View Code 可以看出html的高度和浮動元素div的高度一致都是20px；而包含塊body作為一個html-BFC中的普通block元素，高度為0；?
那么除了html根元素，我們可以手動設置某一個元素為BFC么，答案是肯定的
創(chuàng)建BFC
float的值不為noneoverflow的值不為visibledisplay的值為inline-block、table-cell、table-caption（display：table也認為可以生成BFC，其實這里的主要原因在于Table會默認生成一個匿名的table-cell，正是這個匿名的table-ccell生成了BFC）position的值為absolute或fixedfieldset元素好，那我就順便再來復習一下這些屬性
float的值有l(wèi)eft，right，none；所以一個元素只要浮動起來了，那就會創(chuàng)建BFC區(qū)域；這里要注意的是position:absolute和float會隱式的改變display類型，變?yōu)閐isplay:inline-block，可以設置長寬，默認寬度并不占滿父元素，就算是顯示的設置display:inline或display:block，也沒有效果（因為下文display：inline-block也可以創(chuàng)建BFC，難道是因為float改變元素display后導致創(chuàng)建的BFC，此為推測）。overflow的值有visible、hidden、scroll、auto；這個屬性主要規(guī)定內(nèi)容溢出元素框時發(fā)生的事情；這里注意的是我們往往設置overflow：hidden來清除浮動，因為其他scroll和auto雖然也會創(chuàng)建BFC區(qū)域，但是會出現(xiàn)滾動條display的值inline-block內(nèi)聯(lián)塊狀元素、table-cell表格單元格，類似<td><th>、table-caption表格標題,類似<caption>position的值有absolute、relative、fixed、static；absolute絕對定位，相對于第一個定位的父元素定位；relative相對定位，相對與自身定位；并不脫離文檔流；fixed相對于視口定位fieldset元素，用的比較少，一般用來給表單畫框?BFC的作用
網(wǎng)上舉例的BFC作用比如清除浮動、消除margin重疊、布局等等我就不多贅述了，但是我總感覺這只是利用BFC的特性做一些小事，殺雞用牛刀，事實上BFC并沒有具體的作用，它是一套渲染的規(guī)則，而理解這些規(guī)則可以幫助我們更好的使用CSS，對CSS有一種宏觀的掌控，而解決具體的問題就交給具體的屬性去做吧！
參考文章
http://www.cnblogs.com/dojo-lzz/p/3999013.html#undefined
https://www.jianshu.com/p/76484dff1cb5
http://www.360doc.com/content/16/0229/16/19812575_538294774.shtml
http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120133584314892/
?
“即便是兇殘的野獸和恍惚的小鳥也不會落入相同的陷阱或羅網(wǎng)兩次。”
——圣哲羅姆（古羅馬學者）
?
轉(zhuǎn)載于:https://www.cnblogs.com/Mrcatyang/p/8321977.html
總結(jié)
以上是生活随笔為你收集整理的对BFC的一点认识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
