浮动float

1.传统网页布局三种方式

• 普通流（标准流）
• 浮动
• 定位

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

标签按默认方式排列

• 块级元素 独占一行，从上向下顺序排列 div hr p h1-h6 ul ol dl form table
• 行内元素 按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 span a i em

1.2 浮动

可以改变元素标签默认的排列方式.
最典型应用：可以让多个块级元素一行内排列显示
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

选择器 {
    float: none;  /*默认值，元素不浮动*/
    float: left;  /*向左浮动*/
    float: right; /*向右浮动*/
}

总结：
1.标准流： 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
2.浮动： 可以让块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
3. 定位： 定位最大的特点就是有层叠的概念，可以让多个盒子前后叠压显示，如果元素自由在某个盒子内移动就用定位布局

2.浮动特性

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

• 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
• 浮动的盒子不再保留原先的位置

2.浮动元素会一行内显示并且元素顶部对齐

• 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

3.浮动元素会具有行内块元素的特性

• 任何元素都可以浮动
• 行内元素有了浮动，不需要转换成块级、行内块元素就可以直接设置高度和宽度
• 块级元素没有设置宽度，默认宽度和父级一样宽，添加浮动之后，它的大小根据内容来决定

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

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
网页布局第二准则：先设置盒子大小，之后设置盒子的位置

4.浮动布局注意点

1.浮动和标准流的父盒子搭配使用

• 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动

• 一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
• 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流