浅谈对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简介