一、什么是BFC BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，只有块参与，它规定了内部的块元素如何布局，并且与这个区域外部毫不相干。 二、BFC的布局
一、什么是BFC
BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，只有块参与，它规定了内部的块元素如何布局，并且与这个区域外部毫不相干。
二、BFC的布局规则
- 内部的Box会在垂直方向，一个接一个的布置。
- 属于同一个BFC的两个相邻Box的margin会发生重叠。
- BFC的区域不会与float box重叠。
- BFC容器里面的元素不会影响到外面的元素。
- 计算BFC的高度时，浮动元素也参与计算。
三、触发BFC的条件
- 根元素（html）
- float属性不为none
- position为absolute或fixed
- display为inline-block，table-cell，table-caption，flex，inline-flex
- overflow不为visible
四、BFC的应用
1.根据BFC规则3实现“自适应两栏布局”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0}
html,body{height:100%;}
.left{
width:200px;
height:100%;;
background:orange;
float:left;
}
.right{
height:100%;
background:pink;
overflow:hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
2.根据BFC规则5解决高度塌陷
...