什么是BFC
BFC(Block formatting context) 块级格式化上下文,它是一个独立的渲染区域,其中的元素不受外界的影响,同样的里面的元素也不会影响外面。
BFC 的布局规则
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 内部的Box 会在垂直方向,一个接一个的放置;
- Box 垂直方向的距离由margin决定;同一个Box中的相邻Box的margin会发生重叠;
- 每个盒子(块盒与行盒)的左边距从左往右格式化,即使浮动也是如此。
- BFC的区域不会与float box重叠。(两栏布局原理)
- 计算BFC的高度时,浮动元素也参与计算。(清除浮动原理)
如何创建BFC
- float的值不是none;
- position 的值不是relative或者relative;
- display的值是inline-block、table-cell、flex、或者inline-flex;
- overflow的值不是visible;
BFC的特性及应用
1. 同一个 BFC 下外边距会发生折叠
<style>
.box1{
height: 200px;
margin:30px;
background: red;
}
.box2{
height: 200px;
margin:30px;
background: yellow;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
从上图可以看出,两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠,两个盒子的距离只有 30px;而不是相加60px;
这就是上面说的,BFC布局的第三条。
如果想避免重叠可以将其放在不同的BFC容器中;
<style>
section{overflow: hidden;}
.box1{
height: 200px;
margin:30px;
background: red;
}
.box2{
height: 200px;
margin:30px;
background: yellow;
}
</style>
<body>
<section>
<div class="box1"></div>
</section>
<section>
<div class="box2"></div>
</section>
</body>
这样边距就变成了60px了;
2、BFC可以用来清除浮动(计算BFC的高度时,浮动元素也参与计算)
使用overflow:hidden 清除浮动,是大家常用的功能;其原理就是利用了,出发了盒子的BFC;
我们都知道浮动的元素会脱离文档流
<style>
ul{
border:1px solid #000;
}
li{
width:100px;
height: 100px;
float: left;
background: red;
}
li:nth-child(2n){
background: yellow;
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
我们看到ul 容器的高度只剩下了边框;
我们给ul 触发容器的 BFC,那么容器将会包裹着浮动元素;(添加overflow hidden;属性);
3、BFC 可以阻止元素被浮动元素覆盖
我们来实现一个,左边宽度固定右边自适应的布局;
<style>
.let{width:100px;height:100px;float:left; background: red;}
.right{height:200px; background: yellow;}
</style>
<body>
<div class="let"></div>
<div class="right"></div>
</body>
我们看到右边的元素环绕了左边的元素;如果想避免元素被覆盖,可触发第右边的元素的 BFC 特性,在右边的元素中加入 overflow: hidden,就会变成:
这也是实现,两列自适应布局的常见方法。
什么是IFC
Inline Formatting Context 行内格式化上下文
IFC的布局规则
1、IFC的元素,线框高度由其包含行内元素中最高的实际高度计算而来;
2、IFC的inline box一般左右都贴紧整个IFC;
3、IFC中不可能有块级元素,当插入块级元素时(如p中插入div)会产生两个匿名快与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。