BFC

什么是BFC？

• 定义：BFC是Web页面的一个独立渲染区域，内部元素不会影响外部布局
• 触发条件：
  1. float: 不为 none
  2. position: 为 fixed 和 absolute
  3. display: inline-block，table-cell，flex,inline-flex，grid，inline-grid
  4. overflow: （非visible）

BFC解决了哪些常见的布局问题？

• 清除浮动（防止父元素高度塌陷）
• 阻止外边距合并（margin collapse）
• 避免浮动元素覆盖
• 隔离内部元素与外部上下文

代码分析题

1. 问题：如何让黄色文本区域不环绕红色浮动元素？

<div class="container">
      <div class="float-left">浮动元素</div>
      <div class="text">普通文本内容...</div>
</div>
<style>
  .float-left { float: left; width: 100px; height: 100px; background: red; }
  .text { background: yellow; }
</style>

下面是内容与浮动元素相邻，内容会环绕浮动元素 添加overflow: hidden，触发BFC后，就解决了

2. 以下代码会出现现象：父元素会跟随子元素一起下移20px（外边距合并）

<div class="parent">
  <div class="child" style="margin-top: 20px;">子元素</div>
</div>

解决方案（任选一）：

• 给.parent添加 overflow: hidden（触发BFC）
• 改用 padding-top 替代子元素margin
• 添加透明边框 border: 1px solid transparent