什么是BFC？
BFC(Block formatting context)直译为"块级格式化上下文"
是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
作用： 形成独立渲染区域，内部元素渲染不会影响到外部。
形成BFC的条件？
-
浮动元素，float 不是 none；
-
定位元素，position（absolute，fixed）；
-
flex元素、inline-block元素、及其他，display 为其中之一的值 flex，inline-block，table-cell，table-caption，flow-root（新属性）等等;
-
块级元素 overflow 不是 visible （hidden，auto，scroll）；
BFC的特性
- BFC的区域不会与float元素的区域重叠（清浮动）
- 计算BFC的高度时，float元素也参与计算（清浮动）
- 垂直方向上，并排的BFC元素，margin不折叠
- BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
BFC的应用
- 清除浮动
- 防止上下 margin 重叠
- 防止文字环绕（本质也是清浮动）
代码检验
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color:cornflowerblue;
}
.img {
200px;
float: left;
}
.bfc {
overflow: hidden;
}
</style>
</head>
<body>
<div class="container bfc"> <!-- 清浮动 -->
<img class="img" src="https://i0.hdslb.com/bfs/face/member/noface.jpg@160w_160h_1c_1s.jpg" alt="">
<p class="bfc">哈哈哈哈哈哈哈哈</p> <!-- 防止文字环绕 -->
</div>
</body>
</html>
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://www.cnblogs.com/chen-cong/p/7862832.html
https://juejin.cn/post/6950082193632788493