【CSS】深入浅出BFC及其相关应用

BFC（Block Formatting Context）是CSS中一个重要的概念，它用于决定块级元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

BFC的特性：

1. 内部的元素会在垂直方向一个接一个地放置。
2. 每个元素的左外边距会与包含块的左边距相接触（对于从左到右的格式化），即使存在浮动也是如此。
3. 一个BFC的外部元素会和BFC内部的元素进行分离，不会在布局中影响外部元素。
4. BFC的区域不会与float元素重叠。
5. 计算BFC的高度时，浮动元素的高度也会被计算在内。

创建BFC的方法：

1. 浮动元素（元素的float不是none）。
2. 绝对定位元素（元素的position是absolute或fixed）。
3. inline-block元素（元素的display: inline-block）。
4. table-cell元素（元素的display: table-cell）。
5. table-caption元素（元素的display: table-caption）。
6. overflow值不是visible的块级元素。

应用BFC的场景：

1. 自适应两栏布局。
2. 清除内部浮动。
3. 避免文字环绕图片。

示例代码：

/* 创建BFC */
.bfc-container {
  overflow: auto; /* 或者 'hidden' 或者 'scroll' */
}
 
/* 清除内部浮动 */
.clearfix {
  overflow: auto; /* 或者 'hidden' 或者 'scroll' */
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<!-- 自适应两栏布局 -->
<div style="width: 100%; height: 200px;">
  <div style="float: left; width: 200px; height: 100%;">左侧内容</div>
  <div class="bfc-container">
    <!-- BFC容器 -->
    <div style="height: 100%;">
      右侧内容可以自适应宽度
    </div>
  </div>
</div>
 
<!-- 清除内部浮动 -->
<div class="clearfix">
  <div style="float: left;">浮动元素</div>
  <!-- 其他内容 -->
</div>

以上代码展示了如何创建BFC以及如何利用BFC的特性来解决实际布局中的问题。