1. 什么是BFC？
浮动元素和绝对定位元素，非块级盒子的块级容器，以及overflow值不为visible的块级盒子，都会为他们的内容创建新的BFC
2. 触发条件？
根元素
浮动元素
绝对定位元素
行内元素
表格单元格
overflow值不为visible的快元素
3.应用场景 / 可以解决哪些问题？
- 防止浮动导致父元素高度塌陷
<head>
<style>
.container { border: 10px solid red; }
.inner { background: #08BDEB; height: 100px; width: 100px; }
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>
接下来将inner元素设为浮动，会产生父元素塌陷: .inner {
float: left;
background: #08BDEB;
height: 100px;
width: 100px;
}
对父元素设置BFC，即可解决：
.container {
border: 10px solid red;
overflow: hidden;
}避免外边距折叠
两个块同一个BFC会造成外边距折叠，但如果对这两个块分别设置BFC，那么边距重叠的问题就不存在了
<style>
.container {
background-color: green;
overflow: hidden;
}
.inner {
background-color: lightblue;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
</html>
此时三个元素的上下间隔都是10px, 因为三个元素同属于一个BFC。 现在我们做如下操作:
<div class="container">
<div class="inner">1</div>
<div class="bfc">
<div class="inner">2</div>
</div>
<div class="inner">3</div>
</div>
复制代码style增加:
.bfc{
overflow: hidden;
}标签：BFC,块级,元素,100px,inner,background,overflow,上下文 From： https://www.cnblogs.com/felix-felix/p/17086435.html