块格式化上下文(Block formatting contexts)

浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和overflow不为visible的块盒（当该值已被传播到视口时除外（except when that value has been propagated to the viewport））会为它们的内容建立一个新的块格式化上下文

BFC布局规则:

BFC内部盒会在垂直方向,一个接一个的放置
盒的垂直方向的距离由margin决定.属于同一个BFC的两个相邻盒子的margin会发生重叠
每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反).即使存在浮动也如此
BFC的区域不会与float box重叠(利用这个特性可以做自适应窗口大小)
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素.反之也是如此
计算BFC高度时,浮动元素也参与计算(清除浮动的原理)

块格式化上下文由以下之一创建:

根元素或其它包含它的元素
浮动(元素的float不是none)
绝对定位的元素(元素具有position为absolute或fixed)
行内块 inline-blocks(元素具有display:inline-block)
表格单元格(元素具有display:table-cell,表格单元格默认属性)
表格标题(元素具有display:table-caption,表格标题默认属性)
块元素元素具有overflow值不是visible
弹性盒子flex boxes(元素具有display:flex或inline-flex)
display:flow-root

一个块格式化上下文包括创建它的元素内部所有内容,除了会创建新的块格式化上下文的元素

BFC与margin

BFC可以解决margin折叠问题,需要注意的是,overflow:hidden等属性只在父子元素下起作用,相邻兄弟元素无效

BFC与float

BFC可以改变float的覆盖兄弟元素的问题,实现一侧定宽的布局,还可以解决父元素塌陷问题

细说CSS中的BFC
学习格式化上下文

块格式化上下文(Block formatting contexts)相关推荐

常规流之块级格式化上下文（Block Formatting Contexts）
在css2.1中,常规流包括块框(block boxes)的块格式化(block formatting),行内框(inline boxes)的行内格式化(inline formatting),块级框( ...
Block Formatting Contexts(块级格式化上下文)
前几天看到kejun's blog里面的一篇文章:"近期面试感受", 里面提到面试时的一道题的不同的解决方案,比较它们之间的优缺点,其中出现了一个概念:Block Formatti ...
块格式化上下文（Block Formatting Context，BFC）
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格 ...
CSS 块格式化上下文 BFC
块级框参与的格式化上下文,称作块格式化上下文(Block Formatting Contexts,简称BFC),它规定了内部的块级框如何排列. 块格式化上下文看似抽象,其实比较简单,它实际上就是页面上 ...
hasLayout与Block formatting contexts的学习（上）
hasLayout与Block formatting contexts的学习 @(css BFC)[IE hasLayout|妙瞳] hasLayout是什么? haslayout 是Windows ...
html5边框顶格,CSS 三种定位方式以及格式化上下文详解》 html5jscss
常规流( Normal flow ) 之称之为常规流,是因为这是相对于后面的浮动和绝对定位的一个概念,浮动和绝对定位元素都脱离了当前的常规流. 在 CSS2.1中,常规流包括块框( block box ...
块级格式化上下文（Block Formatting Context）
前言在 CSS 2.1 中,有三种定位方案--普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一 ...
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
相关知识点: 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. ...
html浮动代码_清除浮动与 BFC(块级格式化上下文)
BFC(Block Formatting Context)是在解决清除浮动的问题时遇到的. 一.什么是 BFC MDN: 块格式化上下文(Block Formatting Context,BFC) 是 ...

块格式化上下文(Block formatting contexts)

块格式化上下文(Block formatting contexts)相关推荐

最新文章

热门文章