浮动（重点知识）

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

①普通流（标准流）：标签按规定好默认方式排列

块级元素独占一行顺序从上往下（div、hr、p、h1~h6、ul、ol、dl、form、table）

行内元素会按照顺序从左到右，碰到父元素边缘则自动换行（span、a、i、em）

注：实际开发中，一个页面包含这三种布局方式

2. 如果让多个块级盒子水平排列一行，转换为行内块元素可以实现一行，但它们之间有缝隙，可以浮动

3. 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

4. 浮动语法：

选择器 { float: 属性值}

属性值：none、left、right

5. 浮动特性（重难点）

（1）浮动元素会脱离标准流

①脱离标准流控制移动到指定位置（脱标）

②浮动盒子不再保留原来位置（浮动盒子会压住标准流盒子）

（2）浮动元素会一行内显示且元素顶部对齐（不会有缝隙，父级宽度装不下时，多出盒子会另起一行）

（3）浮动元素具有行内块元素特性（任何元素都可以浮动）

注：如果行内元素有了浮动，不需要转换块级元素\行内块元素就可以直接给高度和宽度

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

（1）约束浮动元素位置：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

7. 网页布局第二准则：先设置盒子大小，之后设置盒子位置

8. 常见网页布局：

9.浮动布局注意点：

（1）浮动与标准流的父盒子搭配（先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置）。

（2）一个元素浮动了，其余兄弟元素也要浮动（浮动盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流）。