一、什么是浮动？

在了解什么是浮动之前我们先了解一下html元素在标准流排列方式。在标准流中，元素是按照它在 HTML 中出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。

常见标准流排版规则：

1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素：从左往右，水平布局，空间不够自动折行

二、浮动的作用

➢ 早期的作用：图文环绕

➢ 现在的作用：网页布局

场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右。

三、浮动的代码

➢ 属性名：float
➢ 属性值：

flaot：left；（左浮动）
flaot：right；（右浮动）

四、浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
• 相当于从地面飘到了空中
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果
• 一行可以显示多个
• 可以设置宽高
➢ 注意点：
• 浮动的元素不能设置text-align:center或者margin:0 auto