如何理解 CSS 布局和块级格式上下文

CSS 布局是指如何将 HTML 元素放置在页面上，它涉及到元素的尺寸、位置和对页面上其他元素的影响。而块级格式化上下文（Block Formatting Context，BFC）则是一种渲染页面的机制，它可以影响元素的布局和表现。

理解 CSS 布局和 BFC 对于有效的页面设计和创建至关重要。下面是针对这两个主题的完整攻略：

如何理解 CSS 布局

1. 盒模型

每个 HTML 元素都遵循盒模型，即具有四个面：上、下、左、右。CSS 定义了元素的边框、内边距和外边距来控制盒子的大小和形状。理解盒子模型的关键是了解边框、内外边距的概念以及它们是如何影响元素大小和位置的。

2. 浮动

float 属性可以使元素脱离文档流，并向左或向右移动。浮动元素不再占据页面中原本的空间位置，从而影响页面布局。理解浮动的关键是了解浮动对其他元素的影响，以及如何清除浮动的影响。

3. 定位

position 属性用于控制元素在页面上的位置。通过设置 "position" 为 "relative" 或 "absolute"，可以实现元素相对定位或绝对定位。 此外， z-index 属性还可以控制元素在堆叠顺序上的位置。要理解定位的关键是了解定位不仅能够改变元素的位置，还可以使元素相对于其祖先元素或视口（viewport）进行定位。

如何理解块级格式化上下文

BFC 是 CSS 中用于描述如何处理元素布局的一种机制。BFC 设定一个独立的渲染区域，其中的元素布局不会影响到外部环境，同时也不受外部环境的影响。换句话说，BFC 提供了一种受控制的布局环境。

1. 创建 BFC

BFC 可以使用以下方式来创建：

• 根元素和 body 元素是默认的 BFC。
• overflow 属性的值不为 visible 的块级元素会创建 BFC。
• display 属性的值为 inline-block、table-cell、table-caption、flex、inline-flex 的元素会创建 BFC。
• position 属性的值为 absolute 或 fixed 的元素会创建 BFC。

2. BFC 的特性

BFC 具有以下特性：

1. 元素在 BFC 中的布局不会影响到 BFC 外部。
2. BFC 内部的元素在布局时，会把它们包含的子元素也考虑在内。
3. BFC 是一个独立的渲染区域，内部的元素布局与外部元素没有任何关联。
4. BFC 在垂直方向上会形成一个从上至下的布局，内部元素不会超出 BFC 底部框线。
5. BFC 可以阻止元素被浮动所覆盖。

3. 示例

一个常见的 BFC 应用是使用 overflow 属性，从而修复浮动元素引起的布局问题。例如，当一个元素中有浮动元素时，该元素可能会折叠为自己的高度，从而导致布局混乱。但是，如果给该元素设置 overflow 属性（除 visible 外的任何值），它就会创建一个 BFC。这将导致该元素扩展到容纳其浮动子元素的高度。

4. 示例

下面的示例展示了如何使用 BFC 来创建两列布局。在此示例中，我们将使用 position 和 overflow 属性来创建两个 BFC，从而使两列保持其高度并避免它们之间的任何布局问题。

<div class="wrapper">
  <div class="left">Left Column</div>
  <div class="right">Right Column</div>
</div>

.wrapper {
  overflow: hidden;
}

.left {
  position: relative;
  float: left;
  width: 200px;
  background-color: #eee;
}

.right {
  overflow: hidden;
  margin-left: 220px;
  background-color: #ccc;
}

在此示例中，左侧列是一个浮动元素，它的宽度被设置为 200 像素。右侧列则使用 overflow 属性来创建 BFC，并设置 margin-left 为 220 像素，从而实现两列的布局。由于左侧列是一个浮动元素，并且右侧列是一个 BFC，它们之间不会产生任何布局问题，两列保持在同一行中，并且都处理其自己的高度。