前端 Float and Position (浮动与定位）

一、Float 浮动

1.为什么需要浮动

• 因为有很多布局效果，标准流无法完成，就需要浮动来完成布局。浮动可以改变元素标签默认的排列方式，可以让多个块级元素一行内排列显示。
• 标准流：标签按照规定好默认方式排序。
• 注意：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

2.浮动的定义及语法

• float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
• 语法：
  选择器 {float : 属性值；}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

3.浮动特性

1. 浮动元素会脱离标准流（脱标），不再保留原先的位置。
2. 浮动元素会一行内显示并且元素顶部对齐
   注意:浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3. 浮动元素具有行内块元素的特性
   （1）任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
   （2）如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
   （3）浮动的盒子中间是没有缝隙的，是紧挨着一起的，行内元素同理

		div {
            float: left;
            width: 100px;
            height: 100px;
        }