【重识 HTML + CSS】浮动

元素一旦浮动后：

• 脱离标准流

• 朝着向左或向右方向移动，直到自己的边界紧贴着包含块或者其他浮动元素的边界为止

包含块 一般指的就是父元素

Rule1：定位元素会层叠在浮动元素上面：

Rule2：浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

• 比如行内级元素、inline-block元素、块级元素的文字内容

• 利用此特性，可以轻松实现文字环绕功能：浮动-文字环绕练习

Rule3：行内级元素、inline-block 元素浮动后，其顶部将与所在行的顶部对齐

实现代码：float-rule_01-其他

Rule4：如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

带圆圈的数字，标记着浮动元素浮动之前的位置

Rule5：浮动元素之间不能层叠

• 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）

• 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

Rule6：浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端

示例代码：float-rule_01、float-rule_02、float-rule_02-其他、float-rule_03

浮动的应用

---

浮动常用的场景：

• 解决行内级元素、inline-block 元素的水平间隙问题

• 布局

浮动存在的问题：高度坍塌

---

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

解决父元素高度坍塌问题的过程，一般叫做 清浮动（清理浮动、清除浮动）

• 清浮动的目的：让父元素计算总高度的时候，把浮动子元素的高度算进去

代码：浮动的问题

清浮动的常见方法

---

给父元素设置固定高度

• 扩展性不好（不推荐）

• 代码：清浮动-01

让父元素浮动

• 可能导致页面中所有元素都浮动

• 父元素脱离了标准流

• 改变了元素的盒子特性（不推荐）

• 代码：清浮动-02

让父元素成为绝对定位元素（position 设置为 absolute 或 fixed）

• 父元素脱离了标准流

• 改变了元素的盒子特性（不推荐）

• 代码：清浮动-03

给父元素设置 display 为 inline-block、inline-table、table、table-cell、table-caption

• 改变了父元素的盒子特性（不推荐）

• 代码：清浮动-04

给父元素设置 overflow 为 visible 以外的值（比如 hidden、auto、scroll）

• 改变了父元素对内容溢出的默认行为（不推荐）

• 代码：清浮动-05

在父元素最后增加一个空的块级子元素，并且让它设置 clear: both

• 会增加很多无意义的空标签，维护麻烦

• 违反了结构与样式分离的原则（不推荐）

• 代码：清浮动-06

在父元素最后增加一个 br 标签：<br clear="all">

• 会增加很多无意义的空标签，维护麻烦

• 违反了结构与样式分离的原则（不推荐）

• 代码：清浮动-07

以上方法都不推荐，简单了解即可

给父元素增加 ::after 伪元素

• 纯 CSS 样式解决，结构与样式分离（推荐）

.clear-fix::after {

content: “”;

display: block;

clear: both;

height: 0; /* 兼容旧浏览器 */
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往获取

面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往获取