CSS浮动

浮动

【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】浮动元素具有行内块元素特性

• 任何元素都可以浮动。
• 不管原先是什么模式的元素，添加浮动之后就具有行内块元素相似的特性