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

資訊專欄INFORMATION COLUMN

深入理解BFC

testHs / 722人閱讀

摘要：最常見的有簡稱和簡稱。計(jì)算的高度時(shí)，浮動(dòng)元素也參與計(jì)算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵?shí)有很多，在元素中添加或者使其父元素形成一個(gè)也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個(gè)問題，只需要把把父元素變成一個(gè)就行了。

一、什么是BFC

Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。Block formatting context直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。通俗地講，BFC是一個(gè)容器，用于管理塊級(jí)元素。

二、如何創(chuàng)建BFC

float為 left|right

overflow為 hidden|auto|scroll

display為 table-cell|table-caption|inline-block|inline-flex|flex

position為 absolute|fixed

根元素

三、BFC布局規(guī)則：

內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置(即塊級(jí)元素獨(dú)占一行)。

BFC的區(qū)域不會(huì)與float box重疊(利用這點(diǎn)可以實(shí)現(xiàn)自適應(yīng)兩欄布局)。

內(nèi)部的Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊(margin重疊三個(gè)條件:同屬于一個(gè)BFC;相鄰;塊級(jí)元素)。

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。（清除浮動(dòng) haslayout）

BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

四、 BFC有哪些特性 特性1：BFC會(huì)阻止垂直外邊距折疊

按照BFC的定義，只有同屬于一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直margin的重疊，這個(gè)包括相鄰元素或者嵌套元素，只要他們之間沒有阻擋（比如邊框、非空內(nèi)容、padding等）就會(huì)發(fā)生margin重疊。

①相鄰兄弟元素margin重疊問題 


    
ABC

    
abc


上面例中兩個(gè)P元素之間距離本該為200px,然而實(shí)際上只有100px,發(fā)生了margin重疊。遇到這種情形，我們?nèi)绾翁幚恚?br>只需要在p外面包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC。那么兩個(gè)P便不屬于同一個(gè)BFC，就不會(huì)發(fā)生margin重疊了。



   
ABC

  

    
abc

②父子元素margin重疊問題 



box



  
h1


上圖wrap元素與h1元素之間l理論上本該有個(gè)40px的上下margin值,然而實(shí)際上父子元素并沒有存在margin值，與此同時(shí)，兩個(gè)div元素的間距為40px。遇到這種情形，我們?nèi)绾翁幚恚?br>處理方法其實(shí)有很多，在wrap元素中添加:overflow:hidden;或者overflow：auto；使其父元素形成一個(gè)BFC；也可以在wrap元素中添加border：1px solid；或是padding：1px；這些都可以有效解決父子元素margin重疊問題。

特性2：BFC不會(huì)重疊浮動(dòng)元素

利用這個(gè)特性，我們可以創(chuàng)造自適應(yīng)兩欄布局。




我是一個(gè)左浮動(dòng)的元素


喂喂喂!大家不要生氣嘛，生氣會(huì)犯嗔戒的。悟空你也太調(diào)皮了，
我跟你說過叫你不要亂扔?xùn)|西，你怎么又……你看，我還沒說完你就把棍子給扔掉了!
月光寶盒是寶物，你把它扔掉會(huì)污染環(huán)境，要是砸到小朋友怎么辦，就算砸不到小朋友，
砸到花花草草也是不對的。


上圖中，文字圍繞著浮動(dòng)元素排列，不過在這里，這顯然不是我們想要的。此時(shí)我們可以為.box2元素的樣式加上overflow:hidden；使其建立一個(gè)BFC,讓其內(nèi)容消除對外界浮動(dòng)元素的影響。


這個(gè)方法可以用來實(shí)現(xiàn)兩列自適應(yīng)布局，效果不錯(cuò)，此時(shí)左邊的寬度固定，右邊的內(nèi)容自適應(yīng)寬度。如果我們改變文字的大小或者左邊浮動(dòng)元素的大小，兩欄布局的結(jié)構(gòu)依然沒有改變！

特性3：BFC可以包含浮動(dòng)----清除浮動(dòng)

我們都知道浮動(dòng)會(huì)脫離文檔流，接下來我們看看下面的例子：

由于容器內(nèi)兩個(gè)div元素浮動(dòng)，脫離了文檔流，父容器內(nèi)容寬度為零（即發(fā)生高度塌陷），未能將子元素包裹住。解決這個(gè)問題，只需要把把父元素變成一個(gè)BFC就行了。常用的辦法是給父元素設(shè)置overflow:hidden。


本文于2018.10.14重新修改，希望文章對你有些許幫助，歡迎在我的GitHub博客點(diǎn)贊和關(guān)注，感激不盡！

參考文章 【CSS】深入理解BFC原理及應(yīng)用 10 分鐘理解 BFC 原理

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

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

相關(guān)文章

  • BFC深入理解

    摘要：一直都知道可以清除浮動(dòng)，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有這么個(gè)東西，寫這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個(gè)屬性便會(huì)避開計(jì)算內(nèi)層元素的高度。但如果高度有具體的值時(shí)，高度超過時(shí)還是會(huì)被裁剪。 一直都知道overflow可以清除浮動(dòng)，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有BFC這么個(gè)東西，寫這篇文章一是為了加深記憶，二是為了加深理解。 ...

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

  • BFC深入理解

    摘要：一直都知道可以清除浮動(dòng)，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有這么個(gè)東西，寫這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個(gè)屬性便會(huì)避開計(jì)算內(nèi)層元素的高度。但如果高度有具體的值時(shí)，高度超過時(shí)還是會(huì)被裁剪。 一直都知道overflow可以清除浮動(dòng)，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有BFC這么個(gè)東西，寫這篇文章一是為了加深記憶，二是為了加深理解。 ...

    王陸寬 評(píng)論0 收藏0

  • 深入理解盒模型與BFC

    摘要：標(biāo)準(zhǔn)盒模型與盒模型開發(fā)者們都知道，由于歷史遺留問題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個(gè)盒模型。即的標(biāo)準(zhǔn)盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個(gè)盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個(gè)元素的組成分為。 標(biāo)準(zhǔn)盒模型與IE盒模型 開發(fā)者們都知道，由于歷史遺留問題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個(gè)css盒模型。即W3C的標(biāo)準(zhǔn)盒模型以及IE的怪異盒模型。在css中，...

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

  • 深入理解BFC

    摘要：最常見的有簡稱和簡稱。計(jì)算的高度時(shí)，浮動(dòng)元素也參與計(jì)算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵?shí)有很多，在元素中添加或者使其父元素形成一個(gè)也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個(gè)問題，只需要把把父元素變成一個(gè)就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，...

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

  • 深入理解BFC

    摘要：最常見的有簡稱和簡稱。計(jì)算的高度時(shí)，浮動(dòng)元素也參與計(jì)算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵?shí)有很多，在元素中添加或者使其父元素形成一個(gè)也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個(gè)問題，只需要把把父元素變成一個(gè)就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，...

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

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

0條評(píng)論

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