六、浮动

6.1、CSS 布局的三种机制

网页布局的核心，就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位。

1. 普通流（标准流）：

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

2. 浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

3. 定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

6.2、什么是浮动(float)

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。他有三个作用：

1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2. 可以实现盒子的左右对齐等等..
3. 浮动最早是用来控制图片，实现文字环绕图片的效果。

6.3、浮动语法

在 CSS 中，通过 float 属性定义浮动，语法如下：

选择器 { float: 属性值; }
复制代码

6.4、浮动详解

漂浮在普通流的上面。脱离标准流。 俗称 “脱标”，float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}
复制代码

浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置。

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    /* 让第 1 个盒子漂浮起来，不占位置 */
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}
复制代码

float属性会改变元素display属性。任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。下面举例我们生活中很常见的一个样式：div 水平排列。

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */
    /* display: inline-block; */
    /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */
    float: left;
}
.two {
    background-color: hotpink;
}
复制代码

浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。

6.4、浮动小结

我们使用浮动的核心目的——让多个块级盒子在同一行显示。 因为这是我们最常见的一种布局方式。

float （浮漏特）