🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS的浮动相关知识。知识学习内容来自b站的@黑马程序员的视频

😃1 传统网页布局的三种方式

🔥浮动

🔥定位

🔥标准流（普通流/文档流）

所谓的标准流，就是标签按照规定好的默认方式排列。例如：

块级元素会独占一行，从上往下顺序排列

• 常用块级元素：div，hr，p，h1-h6，ul，ol，form，table

行内元素会按照顺序从左到右顺序排列，碰到父元素边缘则自动换行。

• 常用行内元素：span，a，i，em

注意：实际开发中，一个页面基本都包含这三种布局方式（移动端会有新的布局方式）

😃2 为什么需要浮动

🔥提问

1. 如何实现一行多个块级元素（如多个div）并列？

2. 如何实现页面左右两个块级元素的对齐？

🔥总结

有很多布局效果标准流无法完成，但是浮动可以解决，因为浮动可以改变标签默认的排列方式。其中浮动最典型的应用就是让多个块级元素一行内并排。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

😃3 什么是浮动

float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或者另一个浮动框的边缘

左边
右边

😃4 浮动的特性

🔥脱离标准流的控制（脱标），浮动的盒子不再保留原先的位置，所以它的位置会被占用

下面的代码将第一个盒子设置为浮动，而第二个盒子没有设置浮动，所以第二个盒子会网上走占据第一个盒子的位置，导致两者重叠了。

左边
右边

🔥如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

左边
中间
右边

注意：浮动的元素是紧贴在一起的，不会有缝隙。如果父级宽度装不下这些浮动的盒子，多出的盒子则会另起一行

🔥浮动元素会具有行内块元素特性

例如span作为行内元素原本没有宽高（需要转换为行内块元素），但是若给他添加浮动，则不需要转换成行内块元素

1
2
pppb

注意：如果块级盒子没有设置宽度，则默认宽度和父级一样宽。但是添加浮动后，它的大小根据内容来决定。

😃5 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们一般先用标准流的父级排列上下位置，之后内部子元素采取浮动排列左右位置，这也符合网页布局第一准则

😃6 三个浮动布局案例——小米商城

下面我们来实现如图的案例

再来实现这个，每个小盒子中间有一些空格

1
2
3
4

最后再做一个手机模块的案例

网页布局第二准则：先布局盒子的大小，再布局盒子的位置

左
2
2
2
2
2
2
2
2