BFC是什么，如何触发，有什么作用

一. BFC就是一个自带结界的盒子，它能：

1. 包住浮动元素

2. 阻止外边距合并

3. 隔离内部布局不影响外部

记住这三个核心功能，BFC就不再抽象难懂了！

BFC的三大核心特性（重点记忆）

1. 隔离空间 - "我的地盘我做主"

<div class="bfc-box">
  <p>内部内容</p>
</div>
<p>外部内容</p>


.bfc-box {
  overflow: hidden; /* 触发BFC */
  background: #f0f0f0;
}

//BFC盒子里的浮动、边距等不会影响外面
//外面的浮动也不会影响BFC盒子内部

2. 包含浮动 - "收拾烂摊子"

<div class="parent">
  <div class="float-child">浮动元素</div>
</div>

.float-child { float: left; height: 100px; }
.parent { border: 2px solid red; }
//问题：父元素高度塌陷（边框包不住浮动元素）
解决方法
.parent {
  overflow: hidden; /* 触发BFC */
  /* 现在父元素能包住浮动子元素了 */
}

3. 阻止边距合并 - "保持距离"

<p>段落1</p>
<p>段落2</p>

p {
  margin: 20px 0;
  /* 实际间距是20px（不是40px） */
}
解决方案：
<div class="bfc">
  <p>段落1</p>
</div>
<p>段落2</p>

.bfc { overflow: hidden; }
/* 现在两个p元素间距变成40px了 */

三、触发BFC的实用方法

overflow: hidden最常用，可能有裁剪
display: flow-root最新推荐，无副作用
float: left/right会改变布局
position: absolute/fixed脱离文档流
display: inline-block会变成行内块

日常开发建议

.clearfix {
  display: flow-root; /* 最佳选择 */
  /* 或者 */
  overflow: hidden; /* 兼容性好 */
}