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

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

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

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

概念

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

布局規(guī)則

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

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

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

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

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

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

如何觸發(fā)BFC

根元素

float屬性不為none

position為absolute或fixed

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

overflow不為visible

用途

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

ie8以上用clearfix：after

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

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

自適應(yīng)布局




    
    Document

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

參考資料

張鑫旭老師的博客

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

荊兆峰 2019-04-23 13:29 評(píng)論0 收藏0
淺析BFC

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

voyagelab 2019-08-29 15:06 評(píng)論0 收藏0