理解BFC以及BFC相關(guān)布局問題解決

atinosun 發(fā)布于2019-08-01 18:39 / 556人閱讀

寫頁面時(shí)會(huì)遇到：

子元素float父元素的高度不會(huì)撐開;

在布局時(shí)，box1and box2,其中box1 float：left，這是box2會(huì)在box1下面，(如果文字過多就會(huì)形成文字環(huán)繞效果)，但我就是想要box2在box1的右側(cè);

又或是上下兩個(gè)box的margin重疊。

這些問題除了其他一些方法解決外，都可以利用加上overflow:hidden，但是why?其實(shí) BFC的作用呢。
BFC??啥？
BFC這個(gè)詞....

BFC：全稱box formatting context;即塊格式上下文，block-level元素參與；

那么什么是block-level呢？
等等等等...
"W3C" CSS2.1規(guī)范：
Block-level elements?are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the?"display"property make an element block-level: "block", "list-item", and "table".
塊級元素是源文檔中被視為塊（例如段落）可視化格式的那些元素。 "display"屬性的以下值構(gòu)成一個(gè)塊級別："block"，"list-item"和"table"。

那它是怎么形成的呢？

以下情況之一：

float值不為none

position:fixed / absolute

display:table-cell / table-caption /inline-block / flex / inline-flex.

overflow屬性不為visible

我們知道了什么是BFC,如何形成BFC，接下來就要說BFC的布局規(guī)則啦
滴滴滴...

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

該知道的理論也差不多了，該解答了~
問題1：子元素float父元素的高度不會(huì)撐開

 
        
        我是left
        我是right

效果：

我們看到container只是right的高，而left中float使該元素脫離了文檔流它的高沒有計(jì)算在內(nèi)，現(xiàn)在要想left的高度計(jì)算在內(nèi)，根據(jù)BFC布局規(guī)則6就可以，形成一個(gè)BFC區(qū)不就可以計(jì)算float的高度嘍，來，上碼：

.container{
                color:#FFF;
                width: 300px;
                margin:100px auto;
                border:1px solid #330033;
                overflow: hidden;
            }

果真嘿，其實(shí)，這里不止加overflow：hidden,加上邊介紹任何一種可以形成BFC區(qū)奏行，比如：overflow: auto; / float: left; /display: flex;等等，根據(jù)項(xiàng)目中的實(shí)際需求。

2.問題2：box2在box1右側(cè)
在問題1里的代碼基礎(chǔ)上，把right區(qū)增加一個(gè)高度比如300px，就可以看到效果liu

           .right{
                background: #FFCCFF;
                height: 300px;
                overflow: hidden;
            }

由于left塊float的原因，導(dǎo)致right在left下面，解決此問題
根據(jù)BFC布局規(guī)則4 ：BFC的區(qū)域不會(huì)與float box重疊，那么right形成BFC區(qū)
效果：

哇，好了呀！

問題3：magin重疊問題

   
        
        我是box1
        我是box2

我們大多以為是80px，可結(jié)果卻是50px!
why?
BFC原則2指明了同一個(gè)BFC區(qū)的margin垂直重疊，不在同一個(gè)是不是就不重疊了，來來來

        ...
        .wrapper{
               overflow:hidden;
          }  
        ...
        
             我是box1
               
        
        我是box2

ok!通過給box1或box2添加一個(gè)父元素形成和另一個(gè)不在同一區(qū)。

關(guān)于垂直margin折疊

兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值;
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對值的較大值;
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和;

最后的最后，歡迎指正~