CSS基础教程

浮动

CSS布局的3种机制

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是：

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

其中：

1. 普通流（标准流）：
   • 块级元素会独占一行，从上到下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table；
   • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则会自动换行。常用元素：span、a、i、em等；
2. 浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
3. 定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

为什么需要浮动

行内块（inline-block）缺陷：

1. 实现多个元素一行显示，但是中间会有空白缝隙。
2. 不能实现盒子左右对齐。

什么是浮动

设置了浮动的元素会

1. 脱离标准普通流的控制
2. 移动到指定位置

作用

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

语法

选择器 { float: 属性值; }

1). 浮动口诀之浮

浮动——浮在普通流的上面，脱离标准流，俗称 “脱标”。

小结：float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。

2). 浮动口诀之漏

浮动——漏。浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。

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

所以，box2下面的其实就是跑到box1盒子下面了， 被box1给压住了，遮挡起来了。

如下，立体图：

3). 浮动口诀之特

浮动特性float属性会改变元素display属性。

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

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

浮动(float)小结

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

定位

绝对定位（固定定位）会完全压住盒子

• 浮动元素，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里的文字。
• 绝对定位（固定定位）会压住下面标准流的所有内容

原因：浮动产生的目的效果是为了做文字的环绕效果，即文字会环绕浮动元素。