成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

BFC及應(yīng)用學(xué)習(xí)總結(jié)

zorpan / 852人閱讀

首先回顧一下普通流，普通流對(duì)后面進(jìn)一步了解BFC有很大的作用

普通流（Normal Flow）

普通流是網(wǎng)頁(yè)中元素的默認(rèn)排版，默認(rèn)情況下
塊級(jí)元素：以block flow direction排列（每一個(gè)塊級(jí)元素新起一行，即以從上往下以列排列）
行內(nèi)元素：不會(huì)另起一行，一個(gè)接一個(gè)排布，直到空間不足

脫離普通流

CSS有以下幾種方法使元素脫離普通流

float

float能夠使元素向某一方向偏移，直接看demo

    

        粉色透明div向左float
    

    

        
本該在黃色div中的文字
            環(huán)繞粉色div
        

        普通流淺藍(lán)色DIV，與粉色div為兄弟元素，且包含黃色子div

為方便看出浮動(dòng)元素脫離普通流遮蓋效果，我給粉色div加了透明度，可以直接看出其覆蓋了藍(lán)色div中的黃色div，同時(shí)因?yàn)?b>文字會(huì)環(huán)繞浮動(dòng)div，故黃色div的文字置于了粉色div下方
（float的本來用處是為了實(shí)現(xiàn)文字環(huán)繞）

absolute與fixed

這兩種情況相對(duì)浮動(dòng)更易于理解，自己動(dòng)手實(shí)驗(yàn)就好啦

display:none

會(huì)使dom節(jié)點(diǎn)不在渲染樹中，不再有分配空間

BFC 簡(jiǎn)介

先看下FC，即Formatting Context（格式化上下文），是W3C CSS2.1中的一個(gè)概念，指頁(yè)面的一塊渲染區(qū)域，有對(duì)應(yīng)的渲染規(guī)則（BFC與IFC），決定子元素如何定位，及和其他元素之間的關(guān)系和相互影響

而BFC即Block Formatting Contexts，觸發(fā)BFC特性的元素會(huì)有以下影響（我翻譯水平較低，內(nèi)容來自W3C BFC）：

一個(gè)BFC下，block子元素會(huì)垂直排列，且垂直方向上會(huì)發(fā)生margin合并

BFC中的元素的左外邊緣會(huì)touch到BFC容器的左邊緣（右邊同理，這個(gè)元素同時(shí)包括浮動(dòng)元素）

結(jié)合上述兩點(diǎn)，各個(gè)blog上有這樣的總結(jié)：

BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會(huì)影響外部的元素。所以，避免margin穿透啊，清除浮動(dòng)什么的也好理解了。（摘自張?chǎng)涡馼log https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout）

什么情況下會(huì)觸發(fā)BFC呢，主要有以下幾種情況

根元素，即HTML標(biāo)簽

浮動(dòng)元素：float值為left、right

overflow值不為 visible，為 auto、scroll、hidden

display值為 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

定位元素：position值為 absolute、fixed

tips：
W3C文檔對(duì)觸發(fā)的更清晰描述：Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells
, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (
except when that value has been propagated to the viewport) establish new block formatting contexts for
 their contents.
應(yīng)用

BFC有很多方面應(yīng)用，了解BFC特點(diǎn)后，很多操作也知道原理了

避免margin合并(margin collapse)

同一個(gè)BFC下：


可見margin發(fā)生合并

不同BFC下：


margin不合并

包含浮動(dòng)元素（清除浮動(dòng)）

這只是清除浮動(dòng)的一種方式而已，而且也有一些局限性，但做個(gè)例子說明BFC的應(yīng)用
未清除浮動(dòng)：


觸發(fā)BFC清除浮動(dòng)：

題外小聲逼逼：使用浮動(dòng)需謹(jǐn)慎

去除覆蓋效果 
    

        粉色透明div向左float
    

    

        普通流淺藍(lán)色DIV，與粉色div為兄弟元素;普通流淺藍(lán)色DIV，與粉色div為兄弟元素;普通流淺藍(lán)色DIV，與
        粉色div為兄弟元素;普通流淺藍(lán)色DIV，與粉色    div為兄弟元素;普通流淺藍(lán)色DIV，與粉色div為兄弟元素;
        普通流淺藍(lán)色DIV，與粉色div為兄弟元素;

顯示如下

浮動(dòng)元素覆蓋于div之上，同時(shí)文字環(huán)繞

但是觸發(fā)淺藍(lán)色的div之后

overflow: hidden;

此時(shí)文字信息為匿名塊框,所以原理還是BFC的第二個(gè)特點(diǎn)：BFC中的元素的左外邊緣會(huì)touch到BFC容器的左邊緣（右邊同理，這個(gè)元素同時(shí)包括浮動(dòng)元素），分離形成此效果

自適應(yīng)布局

結(jié)合上述的去除覆蓋效果與div默認(rèn)的width:auto可以實(shí)現(xiàn)自適應(yīng)布局，但是也有很多局限性，比如overflow:hidden很多場(chǎng)景不適合使用等等

小聲逼逼：flex！

總結(jié)

知道原理可以讓人少犯某些頁(yè)面的布局錯(cuò)誤
內(nèi)容有不妥之處請(qǐng)大佬指出
小聲逼逼：float使用需謹(jǐn)慎！

參考資料

Normal Flow——MDN
CSS深入理解流體特性和BFC特性下多欄自適應(yīng)布局
W3C BFC
10 分鐘理解 BFC 原理
CSS 匿名文本和匿名框

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

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

相關(guān)文章

  • 前端-CSS3&H5

    摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...

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

  • JS每日一題: 如何理解CSS中BFC?

    摘要：期如何理解中定義塊格式化上下文，是頁(yè)面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。 20190416期 如何理解CSS中BFC? 定義: 塊格式化上下文（Block Formatting Context，BFC） 是Web頁(yè)面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。 BFC 特性及應(yīng)用 同一個(gè)...

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

  • 前端經(jīng)典文章

    摘要：上周末看這篇文章時(shí)，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請(qǐng)各位讀者添加一下作者的微信公眾號(hào)，以后有新的文章，將在微信公眾號(hào)直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個(gè)神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，...

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

  • CSS中重要的BFC

    摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡(jiǎn)介在解釋之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡(jiǎn)介 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位...

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

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

0條評(píng)論

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