“批判他人总是想的太简单 剖析自己总是想的太困难”
文章目录
前言
文章有误敬请斧正 不胜感恩！
目录
1. 什么是 CSS 浮动？
2. CSS 浮动的历史背景
3. 基本用法
`float` 属性值
浮动元素的行为
4. 浮动对文档流的影响
5. 清除浮动
`clear` 属性
清除浮动的技巧
1. 使用 `clear` 元素
2. 使用“clearfix”技术
6. 常见应用场景
图片环绕文本
多列布局
7. 浮动的常见问题与解决方案
1. 父容器高度塌陷
2. 浮动元素导致后续元素错位
3. 响应式布局困难
8. 浮动的替代方案
9. 实例演示
示例1：图片环绕文本
示例2：三栏布局
10. 结论
总结
前言
写在开始：
在学习 CSS 布局时，你可能经常会听到“浮动”这个词。虽然现代布局工具如 Flexbox 和 Grid 已经成为主流，但 float 仍然是 CSS 里一个非常重要的属性。它不仅在一些特定场景中有用，还为我们理解布局的运作原理提供了基础。本文将详细介绍 float 的用法、常见应用及其对文档流的影响，带你逐步掌握这个经典但重要的布局工具。
文章有误敬请斧正 不胜感恩！
以下是本篇文章正文内容，
在网页设计的早期阶段，CSS 的 float 属性曾是布局的核心工具。尽管现代 CSS 提供了更强大的布局模块，如 Flexbox 和 Grid，理解 float 仍然对前端开发者至关重要。本篇博客将全面、通俗地解析 CSS 浮动，帮助你掌握这一基础但重要的概念。
目录
什么是 CSS 浮动？
CSS 浮动的历史背景
基本用法
float 属性值
浮动元素的行为
浮动对文档流的影响
清除浮动
clear 属性
清除浮动的技巧
常见应用场景
图片环绕文本
多列布局
浮动的常见问题与解决方案
浮动的替代方案
实例演示
结论
1. 什么是 CSS 浮动？
CSS 浮动（float）是一种将元素从其正常文档流中移出，并使其向左或向右浮动的布局方式。浮动元素的周围内容会环绕其周围，常用于图文混排和简单的多列布局。
2. CSS 浮动的历史背景
在 CSS 早期，网页布局的选择有限，float 成为了实现多栏布局和复杂布局的主要工具。尽管现代布局模块如 Flexbox 和 Grid 提供了更简洁和强大的功能，float 仍然在某些场景中被广泛使用，特别是在需要兼容旧浏览器时。
3. 基本用法
float 属性值
left：元素向左浮动，周围内容环绕其右侧。
right：元素向右浮动，周围内容环绕其左侧。
none：默认值，元素不浮动。
inherit：继承父元素的 float 属性值。
浮动元素的行为
当一个元素被设置为浮动时，它会脱离正常的文档流，向指定方向移动，其他非浮动元素会围绕它排列。浮动元素的宽度需要明确指定，否则它将根据内容自动调整。
.float-left {
float: left;
width: 200px;
}
.float-right {
float: right;
width: 200px;
}
4. 浮动对文档流的影响
浮动元素脱离了正常的文档流，这意味着它们不会影响到后续元素的位置。然而，包含浮动元素的父容器可能会“塌陷”，因为父容器无法感知浮动子元素的高度。
这段文本会环绕在浮动元素的周围。
在上述例子中，如果不处理，.container 容器的高度可能无法包含 .float-left 元素，导致布局问题。
5. 清除浮动
为了让父容器正确包裹浮动子元素，需要清除浮动。
clear 属性
clear 属性用于指定元素的哪一边不能有浮动元素。常见的值有：
left：元素上方和左侧不允许有浮动元素。
right：元素上方和右侧不允许有浮动元素。
both：元素上方不允许有任何浮动元素。
none：不清除浮动。
.clearfix {
clear: both;
}
清除浮动的技巧
1. 使用 clear 元素
在浮动元素后添加一个具有 clear: both; 的元素。