摘要:最常見的有簡稱和簡稱。的區(qū)域不會與重疊。也就是說只要父容器形成就可以,觸發(fā)方式見上清除浮動比較好的方法以上用,用更好的方法自適應布局觸發(fā)自適應屬性對比參考資料張鑫旭老師的博客
本文是從之前的csdn上的亂七八糟的筆記整理過來的
概念Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域,并且有一套渲染規(guī)則,它決定了其子元素將如何定位,以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。BFC,塊級格式化上下文,是一個獨立的渲染區(qū)域,只有block-level-box級別參與,規(guī)定了內部如何布局并且和外部毫不相干
布局規(guī)則內部的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的這個特性來“清浮動”,這里其實說清浮動已經不再合適,應該說包含浮動。
也就是說只要父容器形成BFC就可以,觸發(fā)BFC方式見上
清除浮動比較好的方法:
ie8以上用clearfix:after
ie6,7用clearfix{*zoom:1;}
更好的方法:
.clearfix:after{content:"";display:table;clear:both;}
自適應布局
Document
觸發(fā)BFC自適應屬性對比
張鑫旭老師的博客
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111630.html
摘要:規(guī)范文檔,行內非替換元素背景高度由字體和字體大小決定的,默認處理和行高沒關系,不過這只是瀏覽器現在的處理方法摘自參考。不過實際上這個對樣式的影響不是很大或者設置。的值除了也是可以為數值的。的區(qū)域不會與重疊。 摘要 剛看了一個關于前端面試題的帖子,有些css題雖然能答出來,但出于學習的目的與好奇心,覺得有必要加深一下對功能實現原理的了解。整理出一份文檔,共勉。 正文 行內元素的高 ...
摘要:規(guī)范文檔,行內非替換元素背景高度由字體和字體大小決定的,默認處理和行高沒關系,不過這只是瀏覽器現在的處理方法摘自參考。不過實際上這個對樣式的影響不是很大或者設置。的值除了也是可以為數值的。的區(qū)域不會與重疊。 摘要 剛看了一個關于前端面試題的帖子,有些css題雖然能答出來,但出于學習的目的與好奇心,覺得有必要加深一下對功能實現原理的了解。整理出一份文檔,共勉。 正文 行內元素的高 ...
摘要:屬性,會破壞文檔流,與非定位元素很難結合起來用,因此也不適合自適應布局。,其對無感,無法自適應剩余瀏覽器空間。總結的定義,就如同結界一樣,完全封閉對外無任何影響。引起的各種屬性與自適應布局自適應布局與屬性說明 BFC的定義 BFC的全稱是block formatting context(塊狀格式化上下文),當BFC起作用的時候,其元素內部無論怎么翻江倒海都不會影響到外部元素,同樣,外部...
摘要:的概念以及作用的概念以及作用的定義的定義直譯為塊級格式化上下文。是的首字母縮寫,直譯過來是格式化上下文,它是頁面中的一塊渲染區(qū)域,有一套渲染規(guī)則,決定了其子元素如何布局,以及和其他元素之間的關系和作用。BFC的概念以及作用 BFC的定義: (Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區(qū)域,只有Block-level box參與, 它規(guī)定了內...
閱讀 3712·2021-10-12 10:11
閱讀 1979·2019-08-30 15:53
閱讀 1588·2019-08-30 13:15
閱讀 2302·2019-08-30 11:25
閱讀 1797·2019-08-29 11:24
閱讀 1647·2019-08-26 13:53
閱讀 3521·2019-08-26 13:22
閱讀 1747·2019-08-26 10:24