Block Formatting Context

什么是BFC?
BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一个BFC内的元素有效。

　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

什么情况下会产生BFC呢？
W3C标准中这样描述：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

非块级盒子的浮动元素、绝对定位元素及块级容器(比如inline-blocks，table-cells和table-captions)，以及overflow属性是visible之外任意值的块级盒子，都会创建了一个BFC。即当元素CSS属性设置了下列之一时，即可创建一个BFC:　

float：left|right
position：absolute|fixed
display: table-cell|table-caption|inline-block
overflow: hidden|scroll|auto

BFC的一个简单应用
一个简单的例子：

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta content="text/html" charset="utf-8"/>
 6     <style type="text/css">
 7         body{
 8             margin: 0;
 9             padding: 0;
10         }
11         .main{
12             width: 300px;
13             height: 300px;
14             background-color: #9cf;
15             border: 1px solid red;/*父级div的border*/
16         }
17         .child{
18             width: 150px;
19             height: 150px;
20             background-color: #9fc;
21             margin-top: 20px;
22             /*display: inline-block;*/ /*子级div的display，让块级元素有内嵌元素的属性*/
23         }
24     </style>
25 </head>
26 <body>
27     <div class="main">
28         <div class="child">
29
30         </div>
31         <p>我是一个p,你懂的，我是block元素</p>
32     </div>
33 </body>
34 </html>

结果：

如我们所知的 div里面如果再有一个div的话，里面的‘儿子’如果想纵向居中的话通过margin是实现不了的，但是我们可以给儿子div加上display: inline-block；这样就能产生一个传说中的BFC，让我们能很迅速的调整我们的div儿子到正确的位置，当然我们也可以给父级的div加上border 也能实现这一功能；当然方法很多，我也就不一一列举了。

然后我们试着把p元素里的内容放右边去看看？我们又能想到什么办法呢？float？position？display? 好吧我们试试float把.....

代码：

 1 .child{
 2             width: 150px;
 3             height: 150px;
 4             background-color: #9fc;
 5             margin-top: 20px;
 6             float: left;
 7             /*display: inline-block;*/ /*子级div的display，让块级元素有内嵌元素的属性*/
 8         }
 9 15     </style>
16 </head>
17 <body>
18     <div class="main">
19         <div class="child">
20
21         </div>
22         <p class="newP">我是一个p,你懂的，我是block元素</p>
23     </div>

结果：

貌似我们得到了我们的要求呢？但是如果字一多的话就会出现下面的结果......

结果：

好吧，也许你觉得这蛮不错的，但是我们要如何让后面的P元素里的内容能整整齐齐的呢？

接下来，我们为右侧内容部分设置overflow:hidden 属性来使它形成一个新的BFC：当然你也可以overflow:auto/scroll;都能实现该效果；

代码：

 1         .newP{
 2             overflow: hidden;
 3         }
 4     </style>
 5 </head>
 6 <body>
 7     <div class="main">
 8         <div class="child">
 9
10         </div>
11         <p class="newP">我是一个p,你懂的，我是block元素
12             我是一个p,你懂的，我是block元素
13             我是一个p,你懂的，我是block元素
14             我是一个p,你懂的，我是block元素
15             我是一个p,你懂的，我是block元素
16             我是一个p,你懂的，我是block元素
17             我是一个p,你懂的，我是block元素
18             我是一个p,你懂的，我是block元素</p>
19     </div>
20 </body>

结果：

代码：唯一不同就是用的overflow：scroll

结果：

　　因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

转载于:https://www.cnblogs.com/Jayvenlee/p/3935209.html

Block Formatting Context相关推荐

关于Block Formatting Context－－BFC和IE的hasLayout
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
块级格式化上下文（Block Formatting Context）
前言在 CSS 2.1 中,有三种定位方案--普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一 ...
浅入“Block Formatting Context”
本文主要是针对BFC特性的应用,至于什么是BFC,可以参看MDN的简介: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_fo ...
块格式化上下文（Block Formatting Context，BFC）
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格 ...
BFC(Block Formatting Context) 及其如何工作
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能. 大家好,我是IT修真院北京分院 ...
【修真院web小课堂】请描述 BFC(Block Formatting Context) 及其如何工作
请描述 BFC(Block Formatting Context) 及其如何工作小课堂[北京-WEB-A组] 分享人:要来点本子吗大家好,我是IT修真院北京分院第35期的学员,一枚正直.纯洁.善良 ...
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
相关知识点: 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. ...
点击箭头切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
BFC(Box Formatting Context)的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

Block Formatting Context

Block Formatting Context相关推荐

最新文章

热门文章