當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

浅谈对BFC的认识，以及用bfc解决浮动问题

發(fā)布時間：2024/4/15 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了浅谈对BFC的认识，以及用bfc解决浮动问题小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

我們在前端的學(xué)習(xí)過程中常常會遇到BFC，用BFC來解決一些margin塌陷、margin合并清理浮動流的問題

那么問題來了，我們所說的BFC到底是個什么東西呢；

什么是BFC

　　BFC（Block Formatting Context）即“塊級格式化上下文。我來簡單的解讀一下：

　　　　1.塊級對應(yīng)單詞Block，不難想到的就是display中block屬性，block屬性是將此元素作為塊級元素顯示，根據(jù)塊級元素的特性進(jìn)行渲染，具體的特性下文再來細(xì)說。

　　　　2.格式化Formatting，格式化這個此相信不用我細(xì)說，就是回歸元素最原始的狀態(tài)，即剛開始被定義時的狀態(tài)。

　　　　3.上下文Content我們很熟悉，在js中上下文是一個函數(shù)執(zhí)行前被定義好的的一個環(huán)境，是外部數(shù)據(jù)的集合。在這里好像還是有一點(diǎn)點(diǎn)聯(lián)系的。

　　綜合在一起就是：我們在定義塊級元素，塊級元素在剛剛被生成的時候（即初始化）需要規(guī)定一些規(guī)則來在瀏覽器上布局顯示這個塊級元素，這些規(guī)則也就塊級元素所處的環(huán)境將成為塊級元素與其他元素之間的特性。

　　簡單來說，就是你是塊級元素，瀏覽器在布局時有自己一套對塊級元素布局的規(guī)則，身為塊級元素你得按照我（瀏覽器）的規(guī)矩來。

那么為什么在我們在布局的時候會出現(xiàn)一些我們不期望的結(jié)果（如浮動脫離文檔流和margin合并的問題）

慢慢來，首先就要說說BFC布局的規(guī)則是什么以及普通文檔在布局是的規(guī)則又是什么？

? ? ? ? ? ?普通文檔流布局規(guī)則

? ? ? ? ? ? ? ? ? ?? ?1.浮動的元素是不會被父級計算高度

? ? ? ? ? ? ? ? ? ??? 2.非浮動元素會覆蓋浮動元素的位置

? ? ? ? ? ? ? ? ? ? ??3.margin會傳遞給父級

? ? ? ? ? ? ? ? ? ? ? 4.兩個相鄰元素上下margin會重疊

????

? ? ?　　BFC布局規(guī)則

? ? ? ? ? ? ?　　 1.浮動的元素會被父級計算高度（父級觸發(fā)了BFC）

? ? ? ? ? ? ? ? ? ? ?2.非浮動元素不會覆蓋浮動元素位置（非浮動元素觸發(fā)了BFC）

? ? ? ? ? ? ? ? ? ? ?3.margin不會傳遞給父級（父級觸發(fā)了BFC）

? ? ? ? ? ? ? ? ? ? ?4.兩個相鄰元素上下margin會重疊（給其中一個元素增加一個父級，然后讓他的父級觸發(fā)BFC）

轉(zhuǎn)自：https://www.cnblogs.com/CafeMing/p/6252286.html

定位方案是控制元素的布局，常見的有三種：

普通流（normal flow）
其實就是元素按照再HTML中的先后位置之上而下布局，在這個過程中，行內(nèi)元素水平排列，直到當(dāng)行被沾滿然后換行，塊級元素則會被渲染為完整的一個新行，除非另外制定，否則所有元素默認(rèn)都是普通流定位，也可以說，普通六中元素的位置由該元素再HTML文檔中的位置決定。
浮動（float）
在浮動布局中，元素首先按照普通流的位置出現(xiàn)，然后根據(jù)浮動的方向盡可能地向左邊或右邊偏移，其效果與印刷排版中的文本環(huán)繞相似。
絕對定位（absolute positioning）
在絕對定位布局中，元素會整體脫離普通六，因此絕對定位元素不會對其兄弟元素造成影響，而元素具體的位置由絕對定位的坐標(biāo)決定。

BFC 布局規(guī)則
內(nèi)部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區(qū)域不會與float box重疊。
BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

轉(zhuǎn)自：https://blog.csdn.net/AmberWu/article/details/79543896

以上是我看的兩個對流布局的理解（網(wǎng)上特別多，說法各有不同各有千秋）

如何觸發(fā)BFC

只要元素滿足下面任一條件即可觸發(fā)BFC特性：

body根元素??
浮動元素：float除none以外的值
絕對定位元素：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才對，上面的margin-bottom的100px與下面margin-top重疊了，出現(xiàn)了margin合并

問題出現(xiàn)的原因：兩個塊級元素處在同一個BFC環(huán)境下，同一BFC環(huán)境下的子元素margin上下會互相影響（這其實就是個bug，到我發(fā)稿為止還沒完善）

解決辦法：將兩個元素放到不同的BFC環(huán)境下就好了，如把第二個方法bottom放到另一個bfc容器內(nèi)，top中的margin-bottom是在A? BFC（body）環(huán)境下的，而bottom中的margin-top實在B BFC（box）環(huán)境下的，每一個BFC都是獨(dú)立的，BFC內(nèi)部元素的布局不會對外部造成影響，這樣一來問題就解決了。

<!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盒子上邊距有一個50px的margin，但是實際情況是inner的margin與outer的margin重疊了，原理上與margin合并一樣。

出現(xiàn)的原因：兩個盒子處于同一個BFC環(huán)境下

解決方法：讓outer盒子變成BFC元素，讓里面inner單獨(dú)處于一個BFC環(huán)境

.outer{width: 200px;height: 200px;background: red;margin-top: 100px;overflow: hidden;}

3.清除浮動流

最常見的情況就是用一個div來包裹浮動元素

有浮動流的情況下下

<!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)容所撐開

為什么會出現(xiàn)這樣的情況呢

首先要先說一下什么是浮動流：浮動流是浮動元素的一種布局方式，浮動讓行內(nèi)元素或塊元素自動轉(zhuǎn)化為行內(nèi)塊元素。

　　　　　　　　　　　　　　浮動元素會脫離當(dāng)前的文檔流，后面出現(xiàn)的非浮動元素在排版時還是會按照原來的文檔流來排版，所以會出現(xiàn)浮動元素和正常元素重疊的情況。

　　　　　　　　　　　　　　浮動元素脫離的只是當(dāng)前的文檔流，在給父級outer加margin的時候浮動元素也會跟著父級移動。

　　　　　　　　　　　　　　float屬性在一開始的時候是為了報紙排版才產(chǎn)生的，所以文本類的元素能夠感知到浮動流，并在浮動元素的周圍排列形成文字環(huán)繞。

出現(xiàn)問題的原因：浮動元素處于浮動流，與普通元素所處的流層不一致，所以布局排版時是按照兩個規(guī)則來布局的

解決方法：整個放到一個BFC環(huán)境下，使用同一個規(guī)則。只想要float的特性，不想要浮動流對布局的影響。

.outer{border: 2px solid black; margin:100px; overflow: hidden;}

?以上就是我對BFC的認(rèn)識和對浮動流的理解，如何有什么錯的地方或者是問題歡迎大家一起來討論

轉(zhuǎn)載于:https://www.cnblogs.com/yongG/p/11099894.html