浮动
【1】传统网页布局的三种方式
- 网页布局的本质就是用CSS来摆放一个个盒子。
- CSS提供了三种传统的布局方式（简单来说就是盒子的排列顺序）
- 标准流
- 浮动
- 定位
【2】标准流
- 所谓标准流就是标签按照规定的默认方式排列
- 一个块级元素独占一行，从上向下依次摆放
- 常见块级元素：div,hr,p,h1-h6,ul,ol,li
- 行内元素会按照顺序，从左向右排序，碰到父元素边缘会自动换行
- 常见行内元素：span,a,i,em
【3】为什么需要浮动？
- 有很多布局效果，标准流没有办法实现
- 比如说我想让多个div盒子并排排列
- 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
【4】什么是浮动？
- 把网页想象成一个立体的场景，当给元素设置了浮动属性后，元素就会向上飘起来
- float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法： 选择器
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动的特性
【1】脱标
- 脱离标准流的控制简称脱标
- 浮动的盒子不在保留原先的位置，它会漂浮在上空中，他原先的位置就会空出来
- 其他盒子就会按照标准流的排列方法把它的位置占据
【2】多盒浮动，一排排列
- 如果多个盒子都设置了浮动，则它们都会在一行内显示，并且顶端对齐排列
- 浮动的元素互相贴靠在一起不会有间隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
【3】浮动元素具有行内块元素特性
- 任何元素都可以浮动。
- 不管原先是什么模式的元素，添加浮动之后就具有行内块元素相似的特性