网站备案号查询平台女生学电子商务后悔了
本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏
CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性
CSS- 4.1 浮动（Float）
CSS- 4.2 相对定位（position: relative）
目录
系列文章目录
前言
一、理论部分
1.基本概念
2.浮动属性值
3.浮动元素的特点
4.常见用途
5.清除浮动
5.浮动布局示例
6.现代布局替代方案
7.注意事项
二、代码实例
总结
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、理论部分
浮动（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>代码运行：
总结
以上就是今天要讲的内容，本文简单记录了CSS-浮动（Float），仅作为一份简单的笔记使用，大家根据注释理解