css浮动(float)

1.1 传统网页布局的三种方式

• 网页布局的本质——用css来摆放盒子，把盒子摆放到相应的位置。
• css提供了三种传统布局方式（简单说：就是盒子如何进行排列顺序）：

1. 普通流（标准流）
2. 浮动
3. 定位

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

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

1. 块级元素会独占一行，从上向下顺序排列。

• 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

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

• 常用元素：span、a、i、em等 以上都是标准流布局，标准流是最基本的布局方式。

$这三种布局方式都是用来摆放盒子的，盒子摆放到合适的位置，布局自然就完成了。$ 注意：实际开发中，一个页面都包含了这三种布局方式

1.3需要浮动的原因

1. 实现两个盒子的左右对齐
2. 将多个块级盒子（div）水平排列成一行

• 总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式。
• 浮动最典型的应用：可以让多个块级元素一行内排列显示。
• 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动.

1.4什么是浮动

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

语法：

1.5浮动的特性

1. 浮动元素会脱离标准流（脱标）
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素具有行内块元素的特性