亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

atinosun / 650人閱讀

寫(xiě)頁(yè)面時(shí)會(huì)遇到：

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

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

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

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

BFC：全稱(chēng)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".
塊級(jí)元素是源文檔中被視為塊（例如段落）可視化格式的那些元素。 "display"屬性的以下值構(gòu)成一個(gè)塊級(jí)別："block"，"list-item"和"table"。

那它是怎么形成的呢？

以下情況之一：



float值不為none


position:fixed / absolute


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


overflow屬性不為visible

我們知道了什么是BFC,如何形成BFC，接下來(lái)就要說(shuō)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就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。


計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算.

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

 

        
        
我是left

        
我是right

效果：

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

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

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

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

哇，好了呀！

問(wèn)題3：magin重疊問(wèn)題

   

        
        
我是box1

        
我是box2


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

        ...
        .wrapper{
               overflow:hidden;
          }  
        ...
        

             
我是box1

        
       
        
        
我是box2

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

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



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


兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值;


兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和;

最后的最后，歡迎指正~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/51935.html

相關(guān)文章

  • 理解 CSS 布局和 BFC

    摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來(lái)解決這個(gè)布局問(wèn)題。是布局中的一個(gè)迷你布局你可以將看作是頁(yè)面內(nèi)的一個(gè)迷你布局。理解瀏覽器如何布置網(wǎng)頁(yè)是非?；A(chǔ)的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關(guān)于塊格式化上下文(BFC)的。你可能從未聽(tīng)說(shuō)過(guò)這個(gè)術(shù)語(yǔ)，但是如果你曾經(jīng)用CSS做過(guò)布局，你可能知道它是什么...

    miya 評(píng)論0 收藏0

  • 談?wù)?em>BFC與ie特有屬性hasLayout

    摘要：當(dāng)一個(gè)內(nèi)聯(lián)元素想獲得就要使用這個(gè)屬性。下因?yàn)閷?dǎo)致的浮動(dòng)元素與普通元素之間產(chǎn)生代碼如下我是浮動(dòng)元素我是后面的文字，用來(lái)測(cè)試的正常情況下解決方式加一個(gè)的不只是文字，的浮動(dòng)元素也會(huì)和內(nèi)聯(lián)元素產(chǎn)生的值。設(shè)置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒(méi)更新博文了=-=這里把我之前在博客園寫(xiě)過(guò)的一篇關(guān)于BFC的文章粘貼過(guò)來(lái)，順便自己也再次做個(gè)總結(jié)。 最近看了一篇總結(jié)ie常見(jiàn)bug的文章，里面提...

    CodeSheep 評(píng)論0 收藏0

  • 談?wù)?em>BFC與ie特有屬性hasLayout

    摘要：當(dāng)一個(gè)內(nèi)聯(lián)元素想獲得就要使用這個(gè)屬性。下因?yàn)閷?dǎo)致的浮動(dòng)元素與普通元素之間產(chǎn)生代碼如下我是浮動(dòng)元素我是后面的文字，用來(lái)測(cè)試的正常情況下解決方式加一個(gè)的不只是文字，的浮動(dòng)元素也會(huì)和內(nèi)聯(lián)元素產(chǎn)生的值。設(shè)置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒(méi)更新博文了=-=這里把我之前在博客園寫(xiě)過(guò)的一篇關(guān)于BFC的文章粘貼過(guò)來(lái)，順便自己也再次做個(gè)總結(jié)。 最近看了一篇總結(jié)ie常見(jiàn)bug的文章，里面提...

    iliyaku 評(píng)論0 收藏0

  • CSS: 潛藏著的BFC

    摘要：而就潛藏在其中，當(dāng)你修改樣式時(shí)，一不小心就能觸發(fā)它而毫無(wú)察覺(jué)，因此沒(méi)有意識(shí)到的神奇之處。實(shí)例解決侵占浮動(dòng)元素的問(wèn)題我們知道浮動(dòng)元素會(huì)脫離文檔流，然后浮蓋在文檔流元素上。 在寫(xiě)樣式時(shí)，往往是添加了一個(gè)樣式，又或者是修改了某個(gè)屬性，就達(dá)到了我們的預(yù)期。而B(niǎo)FC就潛藏在其中，當(dāng)你修改樣式時(shí)，一不小心就能觸發(fā)它而毫無(wú)察覺(jué)，因此沒(méi)有意識(shí)到BFC的神奇之處。 一、什么是BFC（Block Form...

    learn_shifeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<