前端学习笔记：CSS页面布局——标准流、浮动和定位

黑马Pink老师的CSS教程：
https://www.bilibili.com/video/BV1Bx411u7cS?p=103
https://www.bilibili.com/video/BV14J4114768?p=169

本文在原教程的基础上对目录结构进行了排序和裁剪。针对视频中的讲解、案例、PPT和源码材料作了一些总结，仅用于个人复习以及学习交流分享。

CSS的页面布局有三种（即盒子如何排列）：

• 标准流
• 浮动
• 定位

标准流如高铁，规定路线。浮动元素如飞机，在空中飞行，有一定风险。定位如UFO，来去不定。

1. 标准流（文档流/普通流）normal flow

标准流就是一个网页内的标签按照规定好的默认方式，从上到下、从左到右顺序排列。

1. 块级元素会独占一行，从上到下顺序排列

   常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素自动换行

   常用元素：span、a、i、em等。

2. 浮动 float

最开始的时候，浮动是用来做文字环绕效果的。

2.1 浮动的定义

设置了浮动的元素会脱离文档的标准流，移动到父元素中的指定位置。

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

2.2 浮动的特性

1. 浮动元素脱离文档的标准流。

   它在标准流的位置不再被保留。“浮”就是漂浮在标准流的上面，压住标准流。

2. 浮动的元素一行内显示，且顶部对齐。

3. 浮动的元素具有行内块元素的特性：一行多个、可设宽高、盒子大小由内容决定。（隐式转换的特性）

2.3 浮动首先需要添加标准流父级

浮动首先创建了包含块的概念（包裹）。也就是说，浮动的元素总是找它最近的父级元素对齐，但不会超出内边距的范围。

一个父盒子里面的子盒子，如果其中一个子盒子有浮动，那么其他子盒子都需要浮动，这样才能一行对其显示。

1. 网页布局第一准侧：先用标准流的父元素排列上下位置；之后内部子元素采取浮动排列左右位置。

2. 网页布局第二准侧：先设置盒子的大小，然后设置盒子的位置。

总结：浮动的目的就是为了让多个块级元素在同一行上显示。

3. 常见的布局

3.1 版心和布局流程

“版心”（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

为了提高网页制作的效率，布局通常要遵循的布局流程：

1. 确定页面的版心（可视区）

2. 分析页面中的行模块，以及每个行模块中的列模块。

   （每个页面都是由行构成的）

3. 制作HTML结构

4. CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

3.2 一列固定宽度且居中

.div {
    
    
    /* 文字居中对齐 */
    text-align: center;
    /* 上下为0，左右居中对齐 */
    margin: 0 auto;
}

3.3 两列左窄右宽

• 要有一个父盒子将left和right盒子包裹
• 如果要留出空隙，要将right盒子的宽度减去空隙的宽度，然后left左浮动，right右浮动

.left {
    
    
    width: 360px;
    /* height不继承，需要指定 */
    height: 500px;
    background-color: powderblue;
    float: left;
}

.right {
    
    
    width: 592px;
    height: 500px;
    background-color: darkturquoise;
    float: right;
}

3.4 通栏平均分布

• 使用ul li来实现一行多个盒子
• 一行内多个盒子都要使用浮动
• li:nth-child(even)，结构伪类选择器选择第偶数个盒子，odd表示奇数，也可用2n表示偶数，2n+1表示奇数。

.main ul li {
    
    
     width: 240px;
     height: 200px;
     background-color: darkturquoise;
     float: left;
}

.main ul li:nth-child(even) {
    
    
    background-color: lightcyan;
}

4. 清除浮动

由于浮动元素不再占用原文档流的位置，所以它回对后面的元素排版产生影响。为了解决这些问题，需要清除浮动。

准确地来说，不是清除浮动，而是清除浮动后造成的影响。

问题描述：

如果父级盒子定高，子级盒子浮动后，依然能够在父盒子中。

但是父级盒子的高度一般由子级盒子来决定，不方便定高度。则子级盒子设置浮动后，脱离标准流，造成高度塌陷的问题。

清除浮动就是为了解决子级盒子浮动后内部高度为0的问题。

清除浮动本质叫做闭合浮动更好，清除浮动就是把浮动的盒子圈到里面。让父盒子闭合出口和入口不让他们出来影响其他元素。

4.1 额外标签法 clear: both

在浮动盒子后面追加一个空盒子，使用clear: both清除浮动。

优点：通俗易懂，书写方便。

缺点：添加了许多无意义的标签，结构化比较差。很少使用。

    /* 清除浮动方法1： 额外标签法*/
    .clear {
    
    
        clear: both;
    }

4.2 给父级元素添加overflow属性

通过触发BFC块级格式化上下文的方式，实现清除浮动。

给父级盒子添加overflow: hidden|auto|scroll均可，一般使用hidden。

优点：代码简洁

缺点：内容增多时，由于不会自动换行，导致内容被隐藏，无法显示需要溢出的元素

4.3 使用after伪元素清除浮动

:after方式为空元素的升级版，好处是不用单独添加标签了

    /* 清除浮动方法3： after伪元素 */
    .clearfix:after {
    
    
        /* 尽量不要空，否则旧版本浏览器有空隙 */
        content: ".";
        /* 转换为块级元素 */
        display: block;
        /* 高度为0，不撑开 */
        height: 0;
        /* 隐藏盒子，看不见内容了 */
        visibility: hidden;
        /* 清除浮动 */
        clear: both;
    }

    /* *代表IE6、7能识别的特殊符号，带有这个*的属性，只有IE6、7才执行，zoom就是IE6、7清除浮动的方法 */
    .clearfix {
    
    
        *zoom: 1;
    }

优点：符合闭合浮动思想，结构语义化正确

缺点：IE6、7不支持:after，需要使用zoom:1 触发hasLayout

4.4 使用before和after双伪元素清除浮动

    /* 清除浮动方法4： before和after双伪元素 */
    .clearfix:before,
    .clearfix:after {
    
    
        content: "";
        /* 触发BFC，清除浮动 */
        display: table;
    }

    .clearfix:after {
    
    
        clear: both;
    }

    /* *代表IE6、7能识别的特殊符号，带有这个*的属性，只有IE6、7才执行，zoom就是IE6、7清除浮动的方法 */
    .clearfix {
    
    
        *zoom: 1;
    }

优点：代码更简洁

缺点：同上

5. 定位 position

定位的主要价值：移动位置，让盒子到我们想要的位置上去。

5.1元素的定位属性

定位 = 定位模式+边偏移

5.1.1 边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

对于一个给定宽高的元素，一般设置了top就不设置bottom，设置了left就不设置right。

5.1.2 定位模式（定位的分类）

值	描述
static	自动定位（默认）
relative	相对定位，相对于原文档流进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位
sticky	黏滞定位，相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）

5.2 静态定位 static

• 网页中所有元素默认都是静态定位，即标准流的特性
• 对于边偏移无效
• 一般是用于清除定位的

5.3 相对定位 relative（自恋型）

postition: relative;

相对定位：它可以通过边偏移移动位置，但是原来所占的位置继续占用。（人走了，钱还在）

• 每次移动的位置，是相对于自己位置的左上角为绩点移动
• 相对定位的盒子仍然在标准流中，后面的盒子依然以标准流的方式对待它

5.4 绝对定位 absolute（拼爹型）

postition: absolute;

绝对定位：元素在移动位置时，是相对于它的父级元素来说的。

• 如果没有父级元素或父级元素没有定位，则一浏览器为准定位（document文档）
• 如果父级元素有定位（相对、绝对、固定），则以最近一级有定位的父级元素为
• 绝对定位脱离文档的标准流，原来所占的位置也不占用了。（人走了，钱也没了）

5.4.1 子绝父相

子绝父相：子级盒子使用绝对定位，父级盒子使用相对定位。

• 子级盒子绝对定位，不会占有位置，可以放到父盒子里任何一个地方，不会影响其他的兄弟盒子
• 父盒子需要加定位限制子盒子在父盒子中显示
• 父盒子布局时，需要占用位置，因此只能使用相对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

5.5 固定定位 fixed

postition: fixed;

固定元素：元素固定于浏览器可视区的位置，可以在浏览器页面滚动元素时，保持固定。

1. 以浏览器的可视窗口作为参照点移动元素
   • 跟父元素没有关系
   • 不随着滚动条而滚动
2. 固定定位脱离标准流，不占有原先的位置，可以看作是一种特殊的绝对定位

5.5.1 固定定位小技巧-固定到版心

固定定位小技巧：固定在版心右侧位置

小算法：

1. 让固定定位的盒子left: 50%，走到浏览器可视区的一半区域
2. 让固定定位的盒子margin-left，走版心宽度的一半距离，就到了版心的右侧对齐了

5.6 黏滞（粘性）定位 sticky

postition: sticky;

粘性定位：相对定位和固定定位的混合

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）
• 粘性定位占有原先的位置（相对定位特点）
• 必须添加top/bottom/left/right其中一个才有效果

兼容性较差，IE不支持

6. 定位总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	较少
relative相对定位	否（占有位置）	相对于自身以为移动	常用
absolute绝对定位	是（不占有位置）	带有定位的父级	常用
fixed固定定位	是（不占有位置）	浏览器可视区	常用
sticky粘性定位	否（占有位置）	浏览器可视区	较少

7. 定位的拓展内容

7.1 定位的叠放次序

使用定位时，可能出现盒子重叠，使用z-index控制盒子的前后顺序。

z-index: 1;

• 可以是正整数、负整数、0或auto（默认），数值越大，盒子越靠上
• 如果属性值相同，则后写的靠上
• 数字后面不能加单位
• 只有定位的盒子才有该属性，标准流和浮动没有

7.2 绝对定位的水平垂直居中

加了绝对定位的盒子不能通过margin: 0 auto水平居中。可以采用以下方法：

1. 先使用left: 50%，移动到父级盒子宽度的一半
2. margin-left，往回移动到自己宽度的一半

垂直居中同理，使用top: 50%和margin-top即可。

7.3 定位的特殊特性

绝对定位和固定定位和浮动类似。

• 行内元素添加绝对或固定定位，可以直接设置宽高。
• 块级元素添加绝对会固定定位，如果不给宽高，默认大小为内容的大小。

脱离标准流的盒子（浮动、绝对定位/固定定位）不会触发外边距塌陷。

7.4 浮动和绝对定位的不同

浮动元素只会压住它下面标准流的盒子，但不会压住下面标准流盒子中的文字/图片；但是绝对定位/固定定位会压住下面标准流的所有内容。