阿卡不拉

Appearance

✨ 浮动 👌 ​

1. 基本概念 ​

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

  1. 常规流
  2. 浮动
  3. 定位

2. 应用场景 ​

浮动最初是为了实现文字环绕图片的效果，后来被广泛用于布局。主要应用场景包括：

2.1. 文字环绕 ​

实现文字围绕图片或其他元素的排版效果。

html
<!-- 文字环绕示例 -->
<div class="container">
  <img
    src="https://bu.dusays.com/2025/07/02/6864965471a79.jpg"
    alt="示例图片"
    class="float-left"
  />
  <p>这段文字会围绕左侧的图片进行排列，形成文字环绕的效果...</p>
</div>
css
.container {
  width: 150px;
}

.float-left {
  float: left;
  margin: 0 15px 15px 0;
}

img {
  width: 100px;
}

2.2. 横向排列 ​

在 Flexbox 和 Grid 布局普及之前，浮动是实现元素横向排列的主要方法。

html
<!-- 横向排列示例 -->
<div class="nav">
  <div class="nav-item">首页</div>
  <div class="nav-item">产品</div>
  <div class="nav-item">服务</div>
  <div class="nav-item">关于我们</div>
</div>
css
.nav-item {
  float: left;
  padding: 10px 20px;
  background: #f0f0f0;
  margin-right: 10px;
}

3. 浮动的基本特点 ​

3.1. float 属性值 ​

修改 float 属性值为：

  • left：左浮动，元素在包含块中靠上靠左
  • right：右浮动，元素在包含块中靠上靠右
  • none：默认值，不浮动

3.2. 浮动元素的特性 ​

:::important

  1. 当一个元素浮动后，元素必定为块盒（更改 display 属性为 block）
  2. 浮动元素的包含块和常规流一样，为父元素的内容盒 :::

4. 盒子尺寸 ​

浮动元素的尺寸计算有其特殊规则：

4.1. 宽度计算 ​

  1. 宽度为 auto 时，适应内容宽度（与常规流块盒不同）
  2. 高度为 auto 时，与常规流一致，适应内容的高度
  3. margin 为 auto 表示为 0
  4. 边框、内边距、百分比设置与常规流一样
css
/* 浮动元素宽度示例 */
.float-box {
  float: left;
  width: auto; /* 会收缩到内容宽度 */
  background: #008c8c;
}

.normal-block {
  width: auto; /* 会扩展到父元素宽度 */
  background: #008c8c;
}

4.2. 尺寸特性对比 ​

属性常规流块盒浮动盒子
width: auto填满包含块宽度适应内容宽度
height: auto适应内容高度适应内容高度
margin: auto水平方向可居中等同于 0

5. 盒子排列 ​

5.1. 基本排列规则 ​

  1. 左浮动的盒子靠上靠左排列
  2. 右浮动的盒子靠上靠右排列
  3. 浮动盒子在包含块中排列时，会避开常规流块盒
  4. 常规流块盒在排列时，无视浮动盒子
  5. 行盒在排列时，会避开浮动盒子（文字环绕效果的原理）
  6. 外边距合并不会发生

为了完整地演示上述所有规则，我们来看一个更全面的例子：

html
<!-- 浮动排列演示 -->
<div class="float-demo-container">
  <div class="float-left-demo">左浮动</div>
  <div class="float-right-demo">右浮动</div>
  <div class="normal-block-demo">常规流块盒 (无视浮动)</div>
  <p>
    这是一段常规流中的文本。由于行盒会避开浮动盒子，所以这段文字会围绕在浮动盒子的周围，形成文字环绕效果。Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
    Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
    sed, dolor.
  </p>
</div>
css
.float-demo-container {
  width: 100%;
  max-width: 500px;
  border: 2px solid #333;
  padding: 10px;
  font-size: 14px;
  overflow: hidden; /* BFC to contain floats */
}

.float-left-demo {
  float: left;
  width: 100px;
  height: 100px;
  background: #ff6b6b;
  margin: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.float-right-demo {
  float: right;
  width: 100px;
  height: 100px;
  background: #4ecdc4;
  margin: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.normal-block-demo {
  background: rgba(255, 223, 186, 0.7);
  border: 1px dashed #f0ad4e;
  padding: 5px;
  margin-bottom: 10px;
  text-align: center;
}

.float-demo-container p {
  text-align: justify;
}

示例解析：

  • 规则 1 & 2：.float-left-demo 靠上靠左，.float-right-demo 靠上靠右。
  • 规则 4：.normal-block-demo 的黄色背景延伸到了浮动盒子的下方，证明常规流块盒“无视”了浮动盒子进行布局。
  • 规则 5：<p> 标签中的文字（在行盒中）避开了左右浮动盒子，形成了文字环绕效果。
  • 规则 3：浮动盒子（红/绿色块）排列时，它们之间以及与容器边缘的 margin 都保持着，并且它们会避开常规流块盒（黄色块）——尽管在这个例子中，常规流块盒先于文本，所以浮动盒是先于它定位的。
  • 规则 6：浮动盒子的 margin 不会与其他元素的 margin 合并。

5.2. 匿名行盒 ​

TIP

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

html
<!-- 匿名行盒示例 -->
<p>Lorem ipsum dolor sit amet</p>
<!-- p元素中的文字会被匿名行盒包裹 -->

6. 高度坍塌问题 ​

6.1. 问题原因 ​

高度坍塌的根源：浮动会导致盒子脱离常规流，因此常规流盒子的自动高度，在计算时，不会考虑浮动盒子。

html
<!-- 高度坍塌示例 -->
<div class="parent">
  <div class="child">浮动子元素</div>
</div>
css
.parent {
  border: 2px solid #333;
  /* 没有设置高度，高度为auto */
}

.child {
  float: left;
  width: 200px;
  height: 100px;
  background: #ff6b6b;
}
/* 结果：父元素高度坍塌为0 */

6.2. 解决方法：清除浮动 ​

清除浮动涉及 CSS 属性：clear

6.2.1. clear 属性值 ​

  • none：默认值，不清除浮动
  • left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
  • right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
  • both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

6.2.2. 常用清除浮动方法 ​

方法一：添加空元素

html
<div class="parent">
  <div class="float-child">浮动元素</div>
  <div class="clear"></div>
</div>
css
.clear {
  clear: both;
}

方法二：使用伪元素（推荐）

css
/* clearfix方法 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}