一、BFC的定义
BFC(Block Formatting Context)全称为块级格式化上下文。简单来说,BFC是一种属性,并且只会作用于Block-level box(块级元素)。设置了这种属性的元素会成为一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
二、BFC的布局规则
- 属于同一个 BFC 的两个相邻 Box 垂直排列
- 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- BFC 中子元素的margin的左边,与父元素(BFC) border box的左边相接触 (子元素 absolute 除外)
- BFC 的区域不会与 float 的元素区域重叠
- 计算 BFC 的高度时,浮动子元素也参与计算
- 文字层不会被浮动层覆盖,环绕于周围
三、怎么创建BFC
- 根元素
- position: absolute/fixed
- display: inline-block / table
- float 浮动
- overflow:hidden
四、BFC的常见作用
1. 给两个相邻盒子中的一个包裹上BFC容器,解决他们垂直方向的margin会发生重叠的问题
下面这个例子中两个相邻 Box 的 margin 会发生重叠:
<style>
*{
margin: 0;
padding: 0;
}
.top, .bottom{
margin: 100px;
}
.top{
width: 100px;
height: 100px;
background: red;
}
.bottom{
width: 100px;
height: 100px;
background: dodgerblue;
}
</style>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
解决方案:
给第二个盒子包裹上BFC容器解决他们垂直方向的margin会发生重叠的问题
对应处于 BFC 内部的元素与外部的元素相互隔离的规则
<style>
*{
margin: 0;
padding: 0;
}
.top, .bottom{
margin: 100px;
}
.top{
width: 100px;
height: 100px;
background: red;
}
.bottom{
width: 100px;
height: 100px;
background: dodgerblue;
}
.father{
overflow: hidden;
}
</style>
<body>
<div class="top"></div>
<div class="father">
<div class="bottom"></div>
</div>
</body>
2. 清除内部元素的浮动,使父元素的高度可以被浮动元素撑起
下面这个例子中,为子元素设置浮动,父元素发生了高度塌陷:
<style>
*{
margin: 0;
padding: 0;
}
.father{
background: red;
border: 1px solid #000;
}
.son{
width: 200px;
height: 200px;
background: blue;
float: left;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
解决方案:
给父元素设置BFC
对应第5条计算 BFC 的高度时,浮动子元素也参与计算的规则
<style>
*{
margin: 0;
padding: 0;
}
.father{
background: red;
border: 1px solid #000;
overflow: hidden;
}
.son{
width: 200px;
height: 200px;
background: blue;
float: left;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
3. 使标准流的元素不被浮动元素覆盖
下面这个例子中,浮动流元素会遮盖住标准流元素
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 200px;
opacity: 0.8;
background: red;
float: left;
}
.right{
width: 300px;
height: 300px;
background: black;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
解决方案:给标准流的元素设置BFC
对应第4条BFC 的区域不会与 float 的元素区域重叠
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 200px;
opacity: 0.8;
background: red;
float: left;
}
.right{
width: 300px;
height: 300px;
background: black;
overflow: hidden;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
扩展:通过这一特点,可以实现自适应两栏布局。
<style>
*{
margin: 0;
padding: 0;
word-break: break-all;
}
.left, .right{
width: 100px;
height: 100px;
background: red;
}
.left{
float: left;
}
.right{
float: right;
}
.center{
height: 100px;
overflow: hidden;
background: #20d3ff;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
</body>
五、总结
以上例子都体现了:
BFC是页面上的一个独立的容器,容器里面的子元素和外面的元素不会相互影响。因此, 当BFC外部存在浮动时,不会影响BFC内部的布局,BFC会移动位置或者变窄,而不会与浮动元素有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。