BFC(块级格式化上下文)
BFC是什么
BFC是一个独立的布局环境，它内部的元素布局与外界互不影响。
产生了BFC的元素内的布局环境：
- 计算该元素的高度时,浮动子元素的高度也参与计算
- BFC区域不会与非该区域内的浮动元素重叠
- 创建BFC的元素不会与它的子元素进行外边距合并,即：处于不同BFC区域的元素之间不会发生外边距合并。
形成BFC的条件
BFC渲染区域由某个HTML元素创建,以下元素会创建：
- 根元素（html元素）
- 浮动、绝对与固定定位元素
- overflow不等于visible的块盒
- display为inline-block、table-cell、table-caption、flex的元素
1、一般情况下，在计算元素高度不会将其子元素中的浮动元素计算在内：
<style>
* {
margin: 0;
padding: 0;
}
.main {
border: 1px solid red;
}
.left {
width: 30px;
height: 30px;
float: left;
margin: 0 10px;
background: #008c8c;
text-align: center;
line-height: 30px;
}
</style>
<body>
<div class="main">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
<div class="left">4</div>
</div>
</body>显示效果如下：
我们通过设置main元素overflow:hidden让其产生BFC区域：
<style>
* {
margin: 0;
padding: 0;
}
.main {
border: 1px solid red;
overflow: hidden;
}
.left {
width: 100px;
height: 100px;
float: left;
margin: 0 10px;
background: #008c8c;
text-align: center;
line-height: 100px;
}
</style>
<body>
<div class="main">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
<div class="left">4</div>
</div>
</body>得到的效果为：
2、一般情况下,常规流块盒在排列时会忽略浮动元素，导致被浮动元素被覆盖，例如：
<style>
* {
margin: 0;
padding: 0;
}
.item1 {
width: 100px;
height: 100px;
float: left;
background: blue;
}
.item2 {
height: 200px;
background: red;
}
</style>
<body>
<div class="item1"></div>
<div class="item2"></div>
</body>效果如下：
通过设置item2元素的overflow:hidden让其产生BFC区域
<style>
* {
margin: 0;
padding: 0;
}
.item1 {
width: 100px;
height: 100px;
float: left;
background: blue;
}
.item2 {
height: 200px;
background: red;
overflow:hidden;
}
</style>
<body>
<div class="item1"></div>
<div class="item2"></div>
</body>item2在排列的时候避开了浮动元素item1，效果如下：
3、在有时候我们会发现，父子元素之间发生了外边距合并：
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 300px;
height: 300px;
background: red;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
.children {
width: 100px;
height: 100px;
background: blue;
margin-top: 10px;
}
</style>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>效果如下：
我们通过设置parent元素的overflow：hidden使其产生BFC区域
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 300px;
height: 300px;
background: red;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
overflow:hidden;
}
.children {
width: 100px;
height: 100px;
background: blue;
margin-top: 10px;
}
</style>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>效果如下：
以上这三种情况是BFC常见的应用：
- 解决浮动元素令父元素高度坍塌问题
- 解决非浮动元素被浮动元素覆盖的问题
- 解决外边距合并的问题
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。