CSS浮动布局指南：从文档流到BFC

第一次碰见浮动的元素你是不是一脸懵，不知道如何处理浮动布局所带来的塌陷问题，因为处理不好后续的容器排版，导致页面制作一片"狼藉"。

今天这篇文章就带你从文档流入手，清晰了解浮动，了解它的本质，以及剖析其背后的"脱离文档流"，"高度塌陷"等问题，并学习五种清楚浮动的方法，了解BFC的世界。

一.先温习：什么是文档流？

浏览器在渲染 html 页面时，遵照从上往下，从左往右，依次排列 ，这种页面的排版方式，就是文档流。

二.浮动布局

浮动的初衷是实现文字环绕

float最初的设计目标是使图片浮动在容器一侧，文章环绕在其周围，float的属性值有left和right。

.img-float {
  float: left;   /* 元素向左浮动，后续内联内容环绕右侧 */
  margin-right: 15px;
}

<div class="container">
  <img src="example.jpg" class="img-float" width="150">
  <p>这是一大段文本。由于图片设置了float:left，文本会环绕在图片的右侧，形成杂志般的图文混排效果。浮动并不会盖住文字，而是自动让出空间给文字流动。</p>
</div>

关键特性：

1. 浮动会导致元素脱离文档流。

2. 但是浮动元素一定不会覆盖文字，文字会"围绕"在浮动元素周围。

浮动带来的副作用：父容器高度塌陷

当一个容器内部的子元素都浮动后，会导致父容器高度塌陷，没有高度，进而影响后续的容器排版。

<style>
  .parent {
    border: 2px solid red;
  }
  .child {
    float: left;
    width: 100px;
    height: 100px;
    background: gold;
    margin: 5px;
  }
</style>
<div class="parent">
  <div class="child">浮动1</div>
  <div class="child">浮动2</div>
</div>
<p>后续段落被"挤"上来了，导致布局错乱。</p>

三.清除浮动五种方式

1.直接给父容器设置高度 -- （不推荐）

.parent {
  height: 120px;   /* 强行设置高度 */
}

直接手动给父容器强行添加一个高度。

缺点：内容高度发生变化时无法自适应，难以维护，适用于高度固定场景。

2.末尾增加空容器设置clear:both -- (不推荐)

在浮动元素末尾添加一个空的块级元素，设置 clear:both，该属性会禁止元素两侧有浮动元素。

<div class="parent">
  <div class="child">浮动元素</div>
  <div style="clear: both;"></div>   <!-- 空元素 -->
</div>

缺点:添加了无意义的冗余标签。

3.为父容器设置::after伪元素清除浮动 -- (推荐)

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

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

4.被影响的元素设置clear:both -- (不推荐)

不修复父容器的高度，而是让后面的元素主动避开影响。

.next-element {
  clear: both;
}

缺点:父容器仍然塌陷，治标不治本。

5.将父容器设置为BFC容器 -- (推荐)

BFC容器有一个重要特性：BFC容器在计算高度的时候，会将浮动的子元素的高度也计算在内。因此只要触发父容器的BFC，就能包裹浮动子元素。

优点：简单高效。

四.BFC

什么是BFC

BFC（Block Formatting Context） 即块格式化上下文，它是一个独立的渲染区域，内部元素与外部元素互不干扰。理解BFC对掌握CSS布局至关重要。

BFC的渲染规则

1. BFC容器内部的子元素也是从上往下，从左往右排列。

2. BFC容器是一个独立的拥有特殊渲染规则的容器 ，它内部的子元素不会影响外部。

3. BFC容器在计算高度的时候，会将浮动的子元素的高度也计算在内。

如何创建BFC

只要元素满足以下任一条件，就触发了BFC：

属性/值	示例
overflow: hidden / auto / scroll	overflow: hidden;
position: absolute / fixed	position: absolute;
float: left / right	float: left;
display: flex / grid / inline-xxx	display: flex;

六、总结

• 文档流 是浏览器默认的排列方式，float 会让元素脱离文档流并产生文字环绕效果。

• 浮动带来的高度塌陷是前端布局中一个经典痛点，理解其成因是解决问题的关键。

• 清除浮动有5种常见方式，推荐使用 .clearfix::after 或 BFC容器。

• BFC 是一个强大且重要的概念：它能包含浮动。掌握其创建方式和渲染规则，能让你的CSS布局游刃有余。