浅谈对BFC的认识，以及用bfc解决浮动问题
我們?cè)谇岸说膶W(xué)習(xí)過程中常常會(huì)遇到BFC，用BFC來解決一些margin塌陷、margin合并清理浮動(dòng)流的問題
那么問題來了，我們所說的BFC到底是個(gè)什么東西呢；
什么是BFC
BFC（Block Formatting Context）即“塊級(jí)格式化上下文。我來簡單的解讀一下：
1.塊級(jí)對(duì)應(yīng)單詞Block，不難想到的就是display中block屬性，block屬性是將此元素作為塊級(jí)元素顯示，根據(jù)塊級(jí)元素的特性進(jìn)行渲染，具體的特性下文再來細(xì)說。
2.格式化Formatting，格式化這個(gè)此相信不用我細(xì)說，就是回歸元素最原始的狀態(tài)，即剛開始被定義時(shí)的狀態(tài)。
3.上下文Content我們很熟悉，在js中上下文是一個(gè)函數(shù)執(zhí)行前被定義好的的一個(gè)環(huán)境，是外部數(shù)據(jù)的集合。在這里好像還是有一點(diǎn)點(diǎn)聯(lián)系的。
綜合在一起就是：我們?cè)诙x塊級(jí)元素，塊級(jí)元素在剛剛被生成的時(shí)候（即初始化）需要規(guī)定一些規(guī)則來在瀏覽器上布局顯示這個(gè)塊級(jí)元素，這些規(guī)則也就塊級(jí)元素所處的環(huán)境將成為塊級(jí)元素與其他元素之間的特性。
簡單來說，就是你是塊級(jí)元素，瀏覽器在布局時(shí)有自己一套對(duì)塊級(jí)元素布局的規(guī)則，身為塊級(jí)元素你得按照我（瀏覽器）的規(guī)矩來。
?
那么為什么在我們?cè)诓季值臅r(shí)候會(huì)出現(xiàn)一些我們不期望的結(jié)果（如浮動(dòng)脫離文檔流和margin合并的問題）
?
慢慢來，首先就要說說BFC布局的規(guī)則是什么以及普通文檔在布局是的規(guī)則又是什么？
?
? ? ? ? ? ?普通文檔流布局規(guī)則
? ? ? ? ? ? ? ? ? ?? ?1.浮動(dòng)的元素是不會(huì)被父級(jí)計(jì)算高度
? ? ? ? ? ? ? ? ? ??? 2.非浮動(dòng)元素會(huì)覆蓋浮動(dòng)元素的位置
? ? ? ? ? ? ? ? ? ? ??3.margin會(huì)傳遞給父級(jí)
? ? ? ? ? ? ? ? ? ? ? 4.兩個(gè)相鄰元素上下margin會(huì)重疊
????
? ? ? BFC布局規(guī)則
? ? ? ? ? ? ? 1.浮動(dòng)的元素會(huì)被父級(jí)計(jì)算高度（父級(jí)觸發(fā)了BFC）
? ? ? ? ? ? ? ? ? ? ?2.非浮動(dòng)元素不會(huì)覆蓋浮動(dòng)元素位置（非浮動(dòng)元素觸發(fā)了BFC）
? ? ? ? ? ? ? ? ? ? ?3.margin不會(huì)傳遞給父級(jí)（父級(jí)觸發(fā)了BFC）
? ? ? ? ? ? ? ? ? ? ?4.兩個(gè)相鄰元素上下margin會(huì)重疊（給其中一個(gè)元素增加一個(gè)父級(jí)，然后讓他的父級(jí)觸發(fā)BFC）
轉(zhuǎn)自：https://www.cnblogs.com/CafeMing/p/6252286.html
?
定位方案是控制元素的布局，常見的有三種：
普通流（normal flow）
其實(shí)就是元素按照再HTML中的先后位置之上而下布局，在這個(gè)過程中，行內(nèi)元素水平排列，直到當(dāng)行被沾滿然后換行，塊級(jí)元素則會(huì)被渲染為完整的一個(gè)新行，除非另外制定，否則所有元素默認(rèn)都是普通流定位，也可以說，普通六中元素的位置由該元素再HTML文檔中的位置決定。
浮動(dòng)（float）
在浮動(dòng)布局中，元素首先按照普通流的位置出現(xiàn)，然后根據(jù)浮動(dòng)的方向盡可能地向左邊或右邊偏移，其效果與印刷排版中的文本環(huán)繞相似。
絕對(duì)定位（absolute positioning）
在絕對(duì)定位布局中，元素會(huì)整體脫離普通六，因此絕對(duì)定位元素不會(huì)對(duì)其兄弟元素造成影響，而元素具體的位置由絕對(duì)定位的坐標(biāo)決定。
BFC 布局規(guī)則
內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC的區(qū)域不會(huì)與float box重疊。
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
轉(zhuǎn)自：https://blog.csdn.net/AmberWu/article/details/79543896
以上是我看的兩個(gè)對(duì)流布局的理解（網(wǎng)上特別多，說法各有不同各有千秋）
?
如何觸發(fā)BFC
只要元素滿足下面任一條件即可觸發(fā)BFC特性：
body根元素??
浮動(dòng)元素：float除none以外的值
絕對(duì)定位元素：position（absolute、fixed）
display為inline-block、table-cells、flex
overflow除了visible以外的值（hidden、auto、scroll）
用BFC來解決布局上的一些問題
1.margin合并
<!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><style>*{margin: 0;padding: 0;}.top{width: 100px;height: 100px;background: #f00;margin-bottom:100px; }.bottom{width: 100px;height: 100px;background: #0ff;margin-top: 200px;}</style> </head> <body><div class="top"></div><div class="bottom"></div></body> </html>?
?
?可以看到兩方塊的上下margin只有200px，按照代碼來說應(yīng)該是上面的100加上下面的200，最后值為300px才對(duì)，上面的margin-bottom的100px與下面margin-top重疊了，出現(xiàn)了margin合并
問題出現(xiàn)的原因：兩個(gè)塊級(jí)元素處在同一個(gè)BFC環(huán)境下，同一BFC環(huán)境下的子元素margin上下會(huì)互相影響（這其實(shí)就是個(gè)bug，到我發(fā)稿為止還沒完善）
解決辦法：將兩個(gè)元素放到不同的BFC環(huán)境下就好了，如把第二個(gè)方法bottom放到另一個(gè)bfc容器內(nèi)，top中的margin-bottom是在A? BFC（body）環(huán)境下的，而bottom中的margin-top實(shí)在B BFC（box）環(huán)境下的，每一個(gè)BFC都是獨(dú)立的，BFC內(nèi)部元素的布局不會(huì)對(duì)外部造成影響，這樣一來問題就解決了。
<!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><style>*{margin: 0;padding: 0;}.top{width: 100px;height: 100px;background: #f00;margin-bottom:100px; }.box{overflow: hidden;/*bfc*/}.bottom{width: 100px;height: 100px;background: #0ff;margin-top: 200px;}</style> </head> <body><div class="top"></div><div class="box"><div class="bottom"></div></div> </body> </html>?2.margin塌陷
<!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><style>*{margin: 0;padding: 0;}.outer{width: 200px;height: 200px;background: red;margin-top: 100px;}.inner{width: 50px;height: 50px;background: blue;margin-top:50px;}</style> </head> <body><div class="outer"><div class="inner"></div></div> </body> </html>?
?
?
?
?
?
?
?
?
?
?
我們想要的效果是inner盒子距離outer盒子上邊距有一個(gè)50px的margin，但是實(shí)際情況是inner的margin與outer的margin重疊了，原理上與margin合并一樣。
出現(xiàn)的原因：兩個(gè)盒子處于同一個(gè)BFC環(huán)境下
解決方法：讓outer盒子變成BFC元素，讓里面inner單獨(dú)處于一個(gè)BFC環(huán)境
.outer{width: 200px;height: 200px;background: red;margin-top: 100px;overflow: hidden;}3.清除浮動(dòng)流
最常見的情況就是用一個(gè)div來包裹浮動(dòng)元素
有浮動(dòng)流的情況下下
<!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><style>*{margin: 0;padding: 0;}.outer{border: 2px solid black; margin:100px; }.inner{width: 100px;height: 100px;float: left;}.red{background: red;}.green{background: green;}.blue{background: blue;}</style> </head> <body><div class="outer"><div class="inner red"></div><div class="inner green"></div><div class="inner blue"></div></div> </body> </html>可以看的的是外面的outer并沒有被內(nèi)容所撐開
為什么會(huì)出現(xiàn)這樣的情況呢
首先要先說一下什么是浮動(dòng)流：浮動(dòng)流是浮動(dòng)元素的一種布局方式，浮動(dòng)讓行內(nèi)元素或塊元素自動(dòng)轉(zhuǎn)化為行內(nèi)塊元素。
浮動(dòng)元素會(huì)脫離當(dāng)前的文檔流，后面出現(xiàn)的非浮動(dòng)元素在排版時(shí)還是會(huì)按照原來的文檔流來排版，所以會(huì)出現(xiàn)浮動(dòng)元素和正常元素重疊的情況。
浮動(dòng)元素脫離的只是當(dāng)前的文檔流，在給父級(jí)outer加margin的時(shí)候浮動(dòng)元素也會(huì)跟著父級(jí)移動(dòng)。
float屬性在一開始的時(shí)候是為了報(bào)紙排版才產(chǎn)生的，所以文本類的元素能夠感知到浮動(dòng)流，并在浮動(dòng)元素的周圍排列形成文字環(huán)繞。
出現(xiàn)問題的原因：浮動(dòng)元素處于浮動(dòng)流，與普通元素所處的流層不一致，所以布局排版時(shí)是按照兩個(gè)規(guī)則來布局的
解決方法：整個(gè)放到一個(gè)BFC環(huán)境下，使用同一個(gè)規(guī)則。只想要float的特性，不想要浮動(dòng)流對(duì)布局的影響。
.outer{border: 2px solid black; margin:100px; overflow: hidden;}?以上就是我對(duì)BFC的認(rèn)識(shí)和對(duì)浮動(dòng)流的理解，如何有什么錯(cuò)的地方或者是問題歡迎大家一起來討論
轉(zhuǎn)載于:https://www.cnblogs.com/yongG/p/11099894.html
總結(jié)
以上是生活随笔為你收集整理的浅谈对BFC的认识，以及用bfc解决浮动问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【转】jmeter响应结果乱码问题
- 下一篇： 【Sqoop学习之一】Sqoop简介