原文地址:什么是BFC?看这一篇就够了,这里只是针对原文做了点修改。
一、关于BFC
BFC定义
BFC(Block formatting context):“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
什么是box
Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:
- block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
- inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
Formatting Context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
BFC的布局规则
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
如何创建BFC
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
总结:Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
二、BFC的作用
-
解决外边距重叠(只利用BFC来解决)
垂直方向外边距合并的规则
(1)两个外边距都是正的,则按最大的那个来计算
(2)两个外边距都是负的,则按绝对值最大的来计算
(3)两个外边距一正一负,则绝对值相加计算.outer{ width: 200px; height: 200px; background-color: #bfa; } .inner{ width: 100px; height: 100px; background-color: yellow; margin-top: 100px; }
解决方式:创建一个BFC,内部元素的布局不会影响到外面的元素
.outer{
width: 200px;
height: 200px;
background-color: #bfa;
/*overflow: hidden;*/
}
.inner{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
.wrapper{
overflow: hidden;
}
<div class="outer">
<div class="wrapper">
<div class="inner">
</div>
</div>
</div>
- 自适应两栏布局
.left{
background-color: yellow;
width: 200px;
height: 100px;
float:left;
}
.right{
background-color: blue;
height: 250px;
}
<div class="left"></div>
<div class="right"></div>
因为–BFC的区域不会与float box重叠。所以用overflow:hidden来触发BFC。但是不能对right用float:right,否则会没有宽度,除非right中有内容来撑起宽度。
.left{
background-color: yellow;
width: 200px;
height: 100px;
float: left;
}
.right{
background-color: blue;
height: 250px;
overflow: hidden;
}
- 解决高度塌陷
.outer{
width: 200px;
background-color: #bfc;
border: 10px solid red;
}
.inner{
width: 100px;
height: 100px;
border: 10px solid yellow;
background-color: black;
float: left;
}
<div class="outer">
<div class="inner">
</div>
</div>
根据-- 计算BFC的高度时,浮动元素也参与计算。 所以我们给父元素激活BFC,此时BFC的高度就是浮动子元素inner的高度。
.outer{
width: 200px;
background-color: #bfc;
border: 10px solid red;
overflow:hidden;
}
.inner{
width: 100px;
height: 100px;
border: 10px solid yellow;
background-color: black;
float: left;
}