CSS- 4.1 浮动（Float）

Yvonne爱编码

已于 2025-05-18 18:02:41 修改

阅读量1.1k

点赞数 23

分类专栏：前端文章标签： css 前端 html HBuilder html5 github

于 2025-05-17 09:51:15 首次发布

本文链接：https://blog.csdn.net/HRDMN/article/details/148023815

版权

前端专栏收录该内容

19 篇文章

订阅专栏

#新星杯·14天创作挑战营·第11期#

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

CSS- 4.1 浮动（Float）

CSS- 4.2 相对定位（position: relative）

CSS- 4.3 绝对定位（position: absolute）&学校官网导航栏实例

CSS- 4.4 固定定位（fixed）& 咖啡售卖官网实例

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、理论部分

浮动（Float）是CSS中的一个重要布局属性，最初设计用于让文本环绕图像，但现在广泛用于网页布局。

1.基本概念

浮动属性使元素脱离正常的文档流，向左或向右移动，直到碰到包含框或另一个浮动元素为止。

2.浮动属性值

float: left; - 元素向左浮动
float: right; - 元素向右浮动
float: none; - 默认值，元素不浮动
float: inherit; - 继承父元素的浮动属性

3.浮动元素的特点

脱离文档流：浮动元素不再占据文档流中的空间
文字环绕：非浮动的块级元素会环绕浮动元素
高度塌陷：父元素可能无法自动包含浮动子元素的高度

4.常见用途

多栏布局：创建等宽或不等宽的多栏布局
文本环绕图片：经典的图文混排效果
导航菜单：创建水平排列的导航项

5.清除浮动

由于浮动元素脱离文档流，可能导致父元素高度塌陷，常用清除浮动的方法：

1. 使用clear属性

css

.clearfix {
  clear: both;
}

2. 空div方法

html

<div style="clear: both;"></div>

3. 伪元素清除法（推荐）

css

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

4. 触发BFC（块级格式化上下文）

css

.parent {
  overflow: hidden; /* 或 auto */
}

5.浮动布局示例

html

<div class="container">
  <div class="box" style="float: left; width: 30%;">左侧内容</div>
  <div class="box" style="float: left; width: 70%;">右侧内容</div>
  <div style="clear: both;"></div> <!-- 清除浮动 -->
</div>

6.现代布局替代方案

虽然浮动仍然有用，但现代CSS布局技术如：

Flexbox
CSS Grid
定位(position)

通常能提供更强大和直观的布局解决方案。

7.注意事项

浮动元素需要明确设置宽度（除非是图像等有内在宽度的元素）
浮动会影响后续元素的布局
在响应式设计中，浮动布局可能不如Flexbox或Grid灵活

浮动是CSS中一个强大但需要谨慎使用的工具，理解其工作原理对于创建稳定的布局至关重要。

二、代码实例

代码实例如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动float</title>
		<style type="text/css">
			.father {
				width: 400px;
				height: 900px;
				border: 1px solid black;
			}
			.div1 {
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
			.div2 {
				width: 200px;
				height: 200px;
				background-color: blue;
				float: left;
			}
			.div3 {
				width: 100px;
				height: 600px;
				background-color: green;
				float: left;
			}
			.c1 {
				clear: both;
				/* 清除浮动 */
				
			}
			ul li {
				float: left;
				width: 120px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="div1"></div>
			<div class="div2 c1"></div>
			<div class="div3"></div>
		</div>
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
			<li>列表5</li>
		</ul>
			
	</body>
</html>

代码运行：