CSS- 4.1 浮动（Float）

本系列可作为前端学习系列的笔记，代码的运行环境是在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）&学校官网导航栏实例

系列文章目录

前言

一、理论部分

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>

代码运行：