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重叠也是这样的一个道理。

 

posted @ 2014-08-25 16:08  李殊岑  阅读(251)  评论(0)  编辑  收藏  举报