关于CSS里BFC特性的理解和应用

时间 2019-11-10

标签关于 css bfc 特性理解应用栏目 CSS 繁體版

原文原文链接

什么是BFC（Block Formatting Context）

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。

而 Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则。具备 BFC 特性的元素能够看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，而且 BFC 具备普通容器所没有的一些特性。css

BFC的布局规则以下：
1. 内部的盒子会在垂直方向，一个个地放置；
2. BFC是页面上的一个隔离的独立容器；
3. 属于同一个BFC的两个相邻Box的上下margin会发生重叠；
4. 计算BFC的高度时，浮动元素也参与计算
5. 每一个元素的左边，与包含的盒子的左边相接触，即便存在浮动也是如此；
6. BFC的区域不会与float重叠；html

那么如何触发 BFC呢？只要元素知足下面任一条件便可触发 BFC 特性：wordpress

body 根元素；
浮动元素：float 不为none的属性值；
绝对定位元素：position (absolute、fixed)
display为： inline-block、table-cells、flex
overflow 除了visible之外的值 (hidden、auto、scroll)

BFC到底有什么卵用呢？

块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。布局

一、同一个 BFC 下外边距会发生折叠
也就是说，两个相邻的普通流中的块元素垂直方向上的 margin会折叠。flex

<style>
.p {  
  width:200px;  
  height:50px;  
  margin:100px 0;  
  background-color:red;  
}  
</style>

<body>
   <div class="p"></div>  
   <div class="p"></div>  
</body>

这里两个div的外边距为100px，而不是200px。之因此发生外边距折叠，是由于他们同属于 body这个根元素。spa

利用BFC能够消除Margin Collapse
BFC致使了margin collapse，而如今又要用它来解决margin cllapse.可是始终要记住一点：只有当元素在同一个BFC中时，垂直方向上的margin才会clollpase.若是它们属于不一样的BFC，则不会有margin collapse.所以咱们能够再创建一个BFC去阻止margin collpase的发生。code

<div class="p"></div>  

<div class="wrap">  
  <div class="p"></div>  
</div> 

.wrap {  
  overflow:hidden; 
} 
.p {  
  width:200px;  
  height:50px;  
  margin:100px 0;  
  background-color:red; 
}

二、 BFC 能够包含浮动的元素（清除浮动）
正常状况下，浮动的元素会脱离普通文档流，使父元素高度坍塌。即外层的div会没法包含内部浮动的div。orm

<div style="border: 1px solid #000;">
    <div style="width: 50px; height: 50px; background: #eee;float: left;">
    </div>
</div>

但若是咱们触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就能够包裹着浮动元素。htm

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

三、BFC 能够阻止元素被浮动元素覆盖/（两栏布局）
rem

大多数状况(若没有特殊设置)，第二个元素有部分被浮动元素所覆盖，(可是文本信息不会被浮动元素所覆盖) ，文本将会环绕浮动元素(如Figure 1)；但有时候这并非咱们指望的，咱们想要的是Figure2。
若是想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden

每每可能你们都会选择利用 margin-left来强行让p的容器有一个左边距，而距离刚好为Floated div的宽度，但如今咱们能够利用BFC更好的解决这个问题。

这个方法能够用来实现两列自适应布局，左边的宽度固定，右边的内容自适应宽度。

References

CSS深刻理解流体特性和BFC特性下多栏自适应布局
[理解CSS中的BFC(块级可视化上下文)[译])](http://flypursue.com/jekyll/u...
CSS: 潜藏着的BFC