BFC vs. Float：终极指南

BFC：块级格式化上下文

• BFC是一个能够包含内部元素并阻止它们与外部元素发生重叠的区域。
• 可以通过设置元素的display属性为block、inline-block、flex或table来创建BFC。
• BFC可以解决一些常见布局问题，例如：
  • margin塌陷
  • margin合并
  • 浮动

Margin塌陷

• margin塌陷是指当两个相邻元素的margin重叠时，它们会合并成一个margin，以较大margin为准。
• 垂直方向的margin塌陷很容易发生，水平方向的margin塌陷则较少见。
• 解决margin塌陷的方法是将其中一个元素设置为BFC，这样它们就不会发生重叠。

Margin合并

• margin合并是指当两个相邻元素的margin都为auto时，它们会合并成一个margin，平分元素之间的空间。
• margin合并的触发原因是两个元素都在同一行，并且没有其他元素在它们之间。
• 解决margin合并的方法是将其中一个元素设置为BFC，或者在两个元素之间添加一个元素。

浮动

• 浮动是指元素脱离正常流，并根据其宽度和高度占据空间。
• 浮动元素不会与其他元素发生重叠，也不会影响其他元素的位置。
• 浮动通常用于创建侧边栏、页脚和其他特殊布局。
• 浮动会导致一些布局问题，例如：
  • 内容无法围绕浮动元素显示
  • 浮动元素与其他元素重叠
• 解决浮动问题的方法是将浮动元素的父元素设置为BFC，这样浮动元素就会在父元素内显示。

BFC vs. Float

• BFC和float都是布局的常用技术，但它们有不同的作用和用法。
• BFC可以解决margin塌陷和margin合并问题，而float可以用于创建侧边栏、页脚和其他特殊布局。
• BFC和float都可以通过设置元素的display属性来实现，但BFC需要设置display: block、inline-block、flex或table，而float只需要设置display: float。

BFC和float的使用示例

• BFC示例1：

<div class="container">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

• BFC示例2：

<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

• Float示例1：

<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

.sidebar {
  float: left;
  width: 200px;
}

• Float示例2：

<div class="container">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

.header {
  float: left;
  width: 100%;
}

.footer {
  float: right;
  width: 100%;
}

结论

• BFC和float都是布局的常用技术，各有其作用和用法。
• BFC可以解决margin塌陷和margin合并问题，而float可以用于创建侧边栏、页脚和其他特殊布局。
• BFC和float都可以通过设置元素的display属性来实现，但BFC需要设置display: block、inline-block、flex或table，而float只需要设置display: float。