国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

zorpan / 878人閱讀

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

普通流（Normal Flow）

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

脫離普通流

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

float

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

    

        粉色透明div向左float
    

    

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

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

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

absolute與fixed

這兩種情況相對浮動更易于理解，自己動手實驗就好啦

display:none

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

BFC 簡介

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

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

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

BFC中的元素的左外邊緣會touch到BFC容器的左邊緣（右邊同理，這個元素同時包括浮動元素）

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

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

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

根元素，即HTML標簽

浮動元素：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文檔對觸發(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特點后，很多操作也知道原理了

避免margin合并(margin collapse)

同一個BFC下：


可見margin發(fā)生合并

不同BFC下：


margin不合并

包含浮動元素（清除浮動）

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


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

題外小聲逼逼：使用浮動需謹慎

去除覆蓋效果 
    

        粉色透明div向左float
    

    

        普通流淺藍色DIV，與粉色div為兄弟元素;普通流淺藍色DIV，與粉色div為兄弟元素;普通流淺藍色DIV，與
        粉色div為兄弟元素;普通流淺藍色DIV，與粉色    div為兄弟元素;普通流淺藍色DIV，與粉色div為兄弟元素;
        普通流淺藍色DIV，與粉色div為兄弟元素;

顯示如下

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

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

overflow: hidden;

此時文字信息為匿名塊框,所以原理還是BFC的第二個特點：BFC中的元素的左外邊緣會touch到BFC容器的左邊緣（右邊同理，這個元素同時包括浮動元素），分離形成此效果

自適應(yīng)布局

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

小聲逼逼：flex！

總結(jié)

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

參考資料

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117575.html

相關(guān)文章

  • 前端-CSS3&H5

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

    xiaolinbang 評論0 收藏0

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

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

    lentoo 評論0 收藏0

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

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

    lowett 評論0 收藏0

  • CSS中重要的BFC

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

    plus2047 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<