css学习BFC IFC GFC FFCCSS

CSS中的BFC

2016-11-15  本文已影响997人  07120665a058

一、BFC是什么？

它是 Block Formatting Context (块级格式化上下文) 的简称，接下来通过对其中几个名词的解释进一步了解 BFC 定义。

  1. Box : CSS布局的基本单位
    　　Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

  1. Formatting context
    　　Formatting context 是指页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称 BFC )和 Inline formatting context (简称 IFC )。

  2. **BFC **：块级格式化上下文
    　　BFC 是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

    • BFC就是一种布局方式，可以理解为一个作用范围，即在一个BFC里的布局与其之外的布局不相关或者说不相互影响。

４. 为什么要用BFC？

二、哪些元素会生成BFC?

三、BFC的布局规则

  1. 内部的Box会在垂直方向上一个接一个的放置；
  2. 垂直方向上的距离有margin决定。（完整的说法是：属于同一个BFC的两个相邻的Box的margin会发生重叠，与方向无关）
  3. 每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式，则为紧挨右边框），即使浮动元素也是如此。（这说明BFC中的子元素不会超出它的包含块）
  4. BFC的区域不会与float的元素区域重叠
  5. 计算BFC的高度时，浮动子元素也参与计算；
  6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

四、BFC的作用及原理

 body { width: 300px; } 
.aside { width: 100px; height: 150px; float: left; background: #f66; } 
.main { height: 200px; background: #fcc; }

<body> 
     <div class="aside"></div> 
     <div class="main"></div>
</body>
根据BFC布局规则 第3条：
* 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此。

现象：虽然存在浮动的元素 aside，但 main 的左边依然会与包含块的左边相接触。

根据BFC布局规则第四条：
* BFC的区域不会与float box重叠。

改变方法：我们可以通过触发 main 生成BFC， 来实现自适应两栏布局，当触发main 生成BFC后，这个新的BFC不会与浮动的 aside 重叠，main 会根据包含块的宽度，和 aside 的宽度，自动变窄。（一个盒子的边框会由于浮动而收缩，盒子本身将会变得更窄）

.main { overflow: hidden;}  //或者利用上述其他方式为它生成 BFC

.par { border: 5px solid #fcc; width: 300px; }
.child { border: 5px solid #f66; width: 100px; height: 100px; float: left;}

<body> 
    <div class="par"> 
      <div class="child"></div> 
      <div class="child"></div>
    </div>
</body>
根据BFC布局规则第五条：
* 计算BFC的高度时，浮动元素也参与计算
**改变方法：**为达到清除内部浮动，我们可以触发 par 生成BFC，那么 par 在计算高度时，par 内部的浮动元素 child 也会参与计算。

.par { overflow: hidden;}　//或者利用上述其他方式为它生成 BFC

<style> 
  p { color: #f55;
       background: #fcc; 
       width: 200px;
       line-height: 100px;
       text-align: center; 
       margin: 100px;
     }
</style>

<body> 
    <p>Haha</p> 
    <p>Hehe</p>
</body>
根据BFC布局规则第二条：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
现象：两个p之间的距离为100px，发送了margin重叠。

我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

<style>
     .wrap { overflow: hidden; }
     p { 
          color: #f55; 
          background: #fcc;
          width: 200px; 
          line-height: 100px;
          text-align: center;
          margin: 100px; 
        }
</style>

<body>
     <p>Haha</p> 
     <div class="wrap">
       <p>Hehe</p>
     </div>
</body>
其实以上的几个例子都体现了BFC布局规则第六条：

五、详细分析 margin 折叠

<div id="A">
  <div id="red" style="background: red;width: 100px;height: 100px;float: left;">
  </div>
  <div id="orange" style="background: orange;width: 100px;height: 100px;float: left;">
  </div>
</div>
<div id="B">
  <div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;">
  </div>
  <div id="green" style="background: green;width: 100px;height: 100px;float: left;">
  </div>
</div>
效果图效果图 
我们可以看到四个盒子最终都处在一列里面，为了达到我们的目的，可以**在其中一个外层盒子建立一个BFC**

<div id="A" style="display:inline-block;">
...
</div>
<div id="B">
...
</div>
新的效果图新的效果图
根据BFC布局规则第四条：
* BFC的区域不会与float box重叠。(与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖)

利用该特性可以作为多栏布局的一种实现方式。

```

<div class="container">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
</div>

.column {
width: 31.33%;
background-color: green;
float: left;
margin: 0 1%;
}
.column:last-child
{
float: none;
overflow: hidden;
}


    ![多列布局.png](http:https://img.haomeiwen.com/i3087126/a263255605a63fa0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###六、关于BFC的总结
* BFC的几个用途 （但是也有其他方法可以达到这种效果）
 * 1、BFC可以阻止垂直边距叠加问题
 * 2、BFC可以包含内部元素的浮动
 * 3、BFC可以阻止元素被浮动覆盖
 * 4、BFC可以决定清除浮动的范围

>参考文章：
[BFC(块级格式化上下文)](http://www.jianshu.com/p/66632298e355)
[我对BFC的理解](http://www.jianshu.com/p/76484dff1cb5)

>其他文章推荐：
[理解CSS中的BFC](http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html)
上一篇 下一篇

猜你喜欢

热点阅读