BFC與自適應(yīng)淺析

makeFoxPlay 發(fā)布于2019-08-29 11:24 / 1881人閱讀

摘要：最常見的有簡稱和簡稱。的區(qū)域不會與重疊。也就是說只要父容器形成就可以，觸發(fā)方式見上清除浮動比較好的方法以上用，用更好的方法自適應(yīng)布局觸發(fā)自適應(yīng)屬性對比參考資料張鑫旭老師的博客

本文是從之前的csdn上的亂七八糟的筆記整理過來的

概念

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

布局規(guī)則

內(nèi)部的Box會在垂直方向，一個接一個地放置。

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊

每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

BFC的區(qū)域不會與float box重疊。

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

計算BFC的高度時，浮動元素也參與計算

如何觸發(fā)BFC

根元素

float屬性不為none

position為absolute或fixed

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

overflow不為visible

用途

清除浮動
原理：BFC可以包含浮動
我們可以利用BFC的這個特性來“清浮動”，這里其實說清浮動已經(jīng)不再合適，應(yīng)該說包含浮動。
也就是說只要父容器形成BFC就可以，觸發(fā)BFC方式見上
清除浮動比較好的方法：

ie8以上用clearfix：after

ie6，7用clearfix{*zoom:1;}

更好的方法：
.clearfix:after{content:"";display:table;clear:both;}

自適應(yīng)布局




    
    Document

觸發(fā)BFC自適應(yīng)屬性對比

參考資料

張鑫旭老師的博客

GPU云服務(wù)器云服務(wù)器 bfc bfc布局源碼淺析 cdn淺析

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

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

相關(guān)文章

側(cè)邊欄的固定與自適應(yīng)原來是這樣實現(xiàn)的（持續(xù)更新）

摘要：規(guī)范文檔，行內(nèi)非替換元素背景高度由字體和字體大小決定的，默認(rèn)處理和行高沒關(guān)系，不過這只是瀏覽器現(xiàn)在的處理方法摘自參考。不過實際上這個對樣式的影響不是很大或者設(shè)置。的值除了也是可以為數(shù)值的。的區(qū)域不會與重疊。摘要剛看了一個關(guān)于前端面試題的帖子，有些css題雖然能答出來，但出于學(xué)習(xí)的目的與好奇心，覺得有必要加深一下對功能實現(xiàn)原理的了解。整理出一份文檔，共勉。正文行內(nèi)元素的高 ...

sarva 2019-08-30 14:06 評論0 收藏0
側(cè)邊欄的固定與自適應(yīng)原來是這樣實現(xiàn)的（持續(xù)更新）

摘要：規(guī)范文檔，行內(nèi)非替換元素背景高度由字體和字體大小決定的，默認(rèn)處理和行高沒關(guān)系，不過這只是瀏覽器現(xiàn)在的處理方法摘自參考。不過實際上這個對樣式的影響不是很大或者設(shè)置。的值除了也是可以為數(shù)值的。的區(qū)域不會與重疊。摘要剛看了一個關(guān)于前端面試題的帖子，有些css題雖然能答出來，但出于學(xué)習(xí)的目的與好奇心，覺得有必要加深一下對功能實現(xiàn)原理的了解。整理出一份文檔，共勉。正文行內(nèi)元素的高 ...

張金寶 2019-08-01 18:39 評論0 收藏0
深入理解css之BFC

摘要：屬性，會破壞文檔流，與非定位元素很難結(jié)合起來用，因此也不適合自適應(yīng)布局。，其對無感，無法自適應(yīng)剩余瀏覽器空間。總結(jié)的定義，就如同結(jié)界一樣，完全封閉對外無任何影響。引起的各種屬性與自適應(yīng)布局自適應(yīng)布局與屬性說明 BFC的定義 BFC的全稱是block formatting context（塊狀格式化上下文），當(dāng)BFC起作用的時候，其元素內(nèi)部無論怎么翻江倒海都不會影響到外部元素，同樣，外部...

姘擱『 2019-08-30 15:54 評論0 收藏0
淺析BFC布局的概念以及作用

摘要：的概念以及作用的概念以及作用的定義的定義直譯為塊級格式化上下文。是的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。BFC的概念以及作用 BFC的定義： (Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)...

荊兆峰 2019-04-23 13:29 評論0 收藏0
淺析BFC

摘要：原文鏈接說起其實有點像閉包在大多數(shù)人印象中的感覺，平時都用過，但在不了解定義的情況下大多數(shù)人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理原文鏈接: Fyerls Blog 說起 BFC 其實有點像閉包在大多數(shù)人印象中的感覺，平時都用過，但在不了解定義的情況下大多數(shù)人卻又不知道這就是 BFC。之所以會想了解下什么...

voyagelab 2019-08-29 15:06 評論0 收藏0