FC及BFC

魏明發(fā)布于2019-08-29 16:26 / 3542人閱讀

摘要：什么是塊級(jí)格式化上下文是布局的對(duì)象和基本單位，直觀點(diǎn)來說，就是一個(gè)頁面是由很多個(gè)組成的。的用途可以阻止元素被浮動(dòng)元素覆蓋實(shí)現(xiàn)自適應(yīng)兩欄布局可以包含浮動(dòng)元素清除內(nèi)部浮動(dòng)不同的可以阻止重疊思維導(dǎo)圖

1.什么是FC

2.BFC塊級(jí)格式化上下文(Block formatting context)

　Box 是 CSS 布局的對(duì)象和基本單位， 直觀點(diǎn)來說，就是一個(gè)頁面是由很多個(gè) Box 組成的。元素的類型和 display 屬性決定了這個(gè) Box 的類型。 不同類型的 Box， 會(huì)參與不同的 Formatting Context（一個(gè)決定如何渲染文檔的容器），因此Box內(nèi)的元素會(huì)以不同的方式渲染。讓我們看看有哪些盒子：
block-level box:display 屬性為 block, list-item, table 的元素，會(huì)生成 block-level box。并且參與 block fomatting context；
inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會(huì)生成 inline-level box。并且參與 inline formatting context；
run-in box: css3 中才有。

(1)定義:它是一個(gè)獨(dú)立的渲染區(qū)域,只有block-level-box參與.它規(guī)定了塊級(jí)盒子內(nèi)部子元素的布局.
(2)BFC常見觸發(fā)條件:

1>.根元素，即HTML元素
2>.float不為none
3>.position不為static或者是relative
4>.overflow的值為hidden,auto或者scroll
5>.display的值為table-cell,table-caption或者inline-block

(3)BFC布局規(guī)則:
1>.BFC內(nèi)部的盒子在垂直方向一個(gè)接一個(gè)的放置
2>.同一個(gè)BFC中相鄰盒子的margin會(huì)發(fā)生合并

3>.每個(gè)元素盒子的左外邊緣(margin-box)和包含它的容器的border-box接觸(對(duì)于從右往左的排版則相反，是右邊接觸),即使存在浮動(dòng)也是如此
抽象1>,2>,3>:盒子排列方式,盒子緊鄰時(shí)外邊距會(huì)合并,盒子嵌套時(shí)內(nèi)部元素的外邊距盒子和外部容器的border-box緊鄰
eg:

說明:img圖片的margin-box和class為first塊元素的border-box的內(nèi)側(cè)接觸.

4>.BFC區(qū)域不會(huì)和float-box重疊
5>.BFC是頁面上一個(gè)獨(dú)立的容器,它其中的子元素不會(huì)影響到外面得元素,外面得元素也不會(huì)影響到內(nèi)部
6>.計(jì)算BFC的高度時(shí),浮動(dòng)元素也參與計(jì)算

簡單記錄順序:獨(dú)立的(5>)渲染(3>,1>,2>,4>)區(qū)域(區(qū)域的計(jì)算方式6>)

(4).重疊的計(jì)算方式
1>當(dāng)兩個(gè)margin都是正值的時(shí)候，取兩者的最大值；
2>當(dāng)margin都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的，然后，從 0 位置，負(fù)向位移；
3>當(dāng)有正有負(fù)的時(shí)候，先取出負(fù) margin 中絕對(duì)值中最大的，然后，和正 margin 值中最大的 margin 相加。

(5).BFC的用途
1>.可以阻止元素被浮動(dòng)元素覆蓋
2>.實(shí)現(xiàn)自適應(yīng)兩欄布局
3>.可以包含浮動(dòng)元素——清除內(nèi)部浮動(dòng)
4>.不同的BFC可以阻止margin重疊

(6)思維導(dǎo)圖