180节---------4月18日

浮动

传统网页布局的三种方式：普通、浮动、定位

一个完整的网页必须包含三种布局方式

普通流（标准流）

标签按照规定好的方式排列

• 块级元素独占一行，从上到下排列

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

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

常用元素：span、a、i、em

---

浮动

• 浮动可以改变元素标签默认的排列方式
• 最典型的应用：可以让多个块级元素以行内排列显示
• 网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动

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

---

语法：选择器{float : 属性值；}

• none 元素不浮动（默认值）
• left 元素向左浮动
• right 元素向右浮动

---

浮动特性

• 浮动元素会脱离标准流的控制移动到指定位置，不再保留原来的位置  （脱标）
• 浮动的元素会一行内显示，并且元素顶部对齐、互相贴靠排列（中间没有缝隙），如果父级宽度装不下这些浮动盒子，多出的盒子会另起一行对齐 
• 浮动的元素会具有行内块元素的特性。任何元素都可以浮动。如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

---

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

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则