1. 程式人生 > >css BFC與IFC相關

css BFC與IFC相關

原來,通過w3c的官方規範可知,閉合浮動的塊盒在margin-top上所產生的間距(clearance)的值與該塊盒的margin-top之和應該足夠讓該塊盒垂直的跨越浮動元素的margin-bottom,使閉合浮動的塊盒的border-top恰好與浮動元素的塊盒的margin-bottom相鄰接。

用上圖例子中的相關值可以得出這樣一個式子:r-margin-top + r-clearance = g-margin-top + g-height + g-margin-bottom

PS!閉合浮動並不能使浮動元素回到原來的BFC當中!

首先BFC是一個名詞,是一個獨立的佈局環境,我們可以理解為一個箱子(實際上是看不見摸不著的),箱子裡面物品的擺放是不受外界的影響的。轉換為BFC的理解則是:BFC中的元素的佈局是不受外界的影響(我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。)並且在一個BFC中,塊盒與行盒(行盒由一行中所有的內聯元素所組成)都會垂直的沿著其父元素的邊框排列。

相關推薦

css BFCIFC相關

原來,通過w3c的官方規範可知,閉合浮動的塊盒在margin-top上所產生的間距(clearance)的值與該塊盒的margin-top之和應該足夠讓該塊盒垂直的跨越浮動元素的margin-bottom,使閉合浮動的塊盒的border-top恰好與浮動元素的塊盒的mar

前端面試之BFCIFC

先說說FC,FC的含義就是Fomatting Context。它是CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關係和相互作用。BFC和IFC都是常見的FC。 Block level 的box會參與形

css布局的各種FC簡單介紹:BFCIFC,GFC,FFC

都是 成了 context 組成 它的 改變 div 區別 ddl 什麽是FC? Formatting Context,格式化上下文,指頁面中一個渲染區域,擁有一套渲染規則,它決定了其子元素如何定位,以及與其他元素的相互關系和作用。 BFC 什麽是BFC Block For

第5章 css背景相關的樣式background

background-origin 設定元素背景圖片的原始起始位置。 語法: background-origin : border-box | padding-box | content-box; 引數分別表示背景圖片是從邊框,還是內邊距(預設值),或者是內容區域開始顯示。 效果如下: 需要注意的是

2018.09.24 學習筆記 // 前端CSS // 浮動BFC

1.什麼是浮動?為什麼要清除? 脫離文件流 空間被後面的人佔用 不排隊的人也得排自己的隊 全部浮動,實現橫向排列 父元素沒有了高度(會影響後面的元素),所以要清除。 2.如何“清楚浮動”/“閉合浮動”? 1.overflow:hiddin 2.給父級新增偽元素

css佈局中的各種FC(BFCIFC、GFC、FFC)

什麼是FC?FC(Formatting Context)格式化上下文,其實指的是一個渲染區域,擁有一套渲染規則,它決定了其子元素如何定位,以及與其他元素之間的關係和相互作用。什麼是BFC? BFC(Block Formatting Context)塊級格式化上下文,指的是一個獨立的塊級渲染區域,擁有一套獨立

CSS中的IFCBFC入門

提到CSS,首先會想到的就是盒模型,如果對於盒模型不是很理解的,看這裡。這是一個基礎的系列,看了盒模型還可以看看box-sizing,好了不多說了,下面介紹今天的重點。首先從概念入門,B是Block,I是inline,F [Formatting] C [context]。一句

淺析css中的BFCIFC、GFC和FFC

FC的全稱是:Formatting Contexts,是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關係和相互作用。 FC一共包含BFC、IFC、GFC 、FFC四種類型。CSS2.

CSS】淺談css中格式化上下文BFCIFC(二)

Inline Formatting Context Inline Formatting Context的縮寫就是IFC。中文名叫,行內格式化上下文。行內框參與IFC。 什麼是行框? 在IFC中,每個框都是一個接一個地水平排列,起點是包含塊的頂部,水平方向

CSS屬性、BFCIFC

定位屬性 1.clear 規定哪一側不允許元素浮動 left 在左側不允許浮動元素。 right 在右側不允許浮動元素。 both 在左右兩側均不允許浮動元素。 none 預設值。允許浮動元素出現在兩側 2.clip 剪裁絕對定位的元素 cl

淺析CSS裡的 BFCIFC

前言之前一直聽到有人提到 CSS裡的BFC,正巧在 IFE的練習裡遇到了外邊距摺疊的問題,所以正

CSS裏的BFCIFC的用法

isp align ack nbsp 圖片 塌陷 alt cell add **一、BFC**--------------------- Block Formatting Contexts (BFC,塊級格式化上下文),就是 一個塊級元素 的渲染顯示規則 (可

WCAG相關的一些學習心得

mis text 閃爍 wave 什麽 inf blog 行動 ... 1.什麽是 WCAG? WCAG全稱Web Content Accessibility Guidelines 網頁內容無障礙瀏覽準則,簡單的說就是為了方便殘障人士(包括低視患者,盲人,聾人,學習障礙,行

postgis相關的一些常用的sql

geo value lec insert type point nes table null create table NODES (ID SERIAL not null,geometry geography(POINTZ, 4326) null); create tab

mallocnew相關

初始化 空字符 原理 支持 oca 容器 pan 新的 set   malloc函數:malloc的全稱是memory allocation,中文叫動態內存分配。作用是向系統申請分配指定size個字節的內存空間,函數原型為: extern void *malloc(uns

什麽是BFCIFC、GFC和FFC

不同 其中 none cal line w3c ive idl fin 什麽是BFC、IFC、GFC和FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。 FC的全稱是:Formatting Contexts,是W3C CSS2.1規範中的一個概念。它

Shellif相關參數

如果 -s lena 表達式 recent ica 打開 字符串相同 int [ -a FILE ] 如果 FILE 存在則為真。 [ -b FILE ] 如果 FILE 存在且是一個塊特殊文件則為真。 [ -c FILE ] 如果 FILE 存在且是一個字特

CSS格式布局中三種位置的理解應用

tom ora col 使用 其它 wid abs 方式 出現   第一種位置關系:position:fixed 鎖定位置(相對於整個瀏覽器的位置),常用在各大網站的右下角或其它位置的小廣告。 如果需要調整鎖定位置,需要使用如下方式:<div style="widt

osgi應用使用橋接的方式打成war包部署在websphere上時遇到的cxf相關的問題

rim 部署 虛擬 pre osgi try 每一個 exception avi 原來我們的程序都是基於Equinox架構的,可是後面由於要實現打成war包在中間件中部署的需求,使用了eclipse官方提供的橋接方式實現。 橋接的部分後面有時間了我專門寫一

http緩存cdn相關技術

現在 pri 3-9 網絡服務 超時 有時 文件 技術分享 位置檢索 一 http緩存 1.1緩存的分類: http中具有緩存功能的是:1、瀏覽器緩存、 2、緩存代理服務器。 1.2 什麽是緩存: http緩存的是指:當Web請求抵達緩存時, 如果本地有“