BFC
# BFC
[TOC]
# 一、基本概念
- 块级格式化上下文（Block Formatting Context）：block-level box + Formatting Context。
- 一个独立的渲染区域，与外部区域毫不相干。
# 二、特性
# 2.1 BFC内部的子元素在垂直方向边距重叠
# 2.2 BFC在页面中是独立的容器，不受外部影响
用途：解决margin重叠问题
# 2.3 BFC区域与float区域不重叠
<style>
.wrap{
width: 100px;
background: #ffff80;
word-break: break-all;
}
.left{
width: 50px;
float: left;
background: #fff;
}
.right{
background: #ffff00;
overflow: hidden;
}
</style>
<div class="wrap">
<div class="left">sixsixsixsixsixsix</div>
<div class="right">sixsixsixsixsixsixsixsixsixsixsixsixsixsixsixsixsixsixsixsixsix</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 2.4 计算BFC高度时，浮动的子元素也参与计算
若父元素只有浮动元素时，高度就无法撑开，这个时候就得让父元素成为BFC了。