CSS网页布局：标准流、浮动流与定位流

在网页设计中，CSS（层叠样式表）扮演着至关重要的角色，它决定了网页的外观和布局。CSS布局的核心在于如何有效地摆放网页中的各个“盒子”（即HTML元素）。本文将详细探讨CSS网页布局中的三种基本方式：标准流、浮动流和定位流。

1.标准流（Normal Flow）

标准流是网页中元素默认的布局方式，也称为文档流或普通流。在这种布局方式下，元素按照HTML文档中的顺序从上到下、从左到右排列。

• 块级元素（如<div>、<p>、<h1>等）会独占一行，从上到下顺序排列。
• 行内元素（如<span>、<a>等）会在行内排列，碰到父元素边缘则自动换行。

标准流布局简单且直观，适用于简单的网页结构和内容布局。它不需要额外的CSS属性即可实现基本布局，并且随着浏览器窗口大小的变化，能够自然调整布局，表现出良好的响应式特性。

从元素的布局特性来分，主要可以分为三类元素：块级元素、行内元素、行内块元素。
块级元素

• 独占一行（width默认为100%，height为0）
• 宽高内外边距都是可以设置的
• 常见的块级元素：div h1-h6 ul ol li dl dt dd form p

行内元素

• 宽高靠内容撑开，一行可以放多个
• 不能设置宽高，就像橡皮筋包住字
• 可以设置水平方向的margin和padding，不能设置垂直方向的padding和margin
• 常见的行内元素：span b strong i em ins del u

行内块元素

• 宽高靠内容撑开 ，一行可以放多个
• 宽高内外边距都是可以设置的
• 常见的行内块元素：Img input a

需要注意一点的是：行内元素和行内块元素水平排列时，元素之间会出现大约6px的空白间隙，这是由于元素间空白字符（换行符、空格或制表符）导致。

2.浮动流（Float Layout）

浮动流通过float属性将元素从正常的文档流中脱离，使其向左或向右浮动，从而允许其他元素围绕它们排列。浮动布局最初用于实现多列布局和图片环绕文本效果。

应用场景: 让垂直布局的盒子变成水平布局（块级元素排成一行）
如：一个在上方窗口左，一个在窗口右上方（当浏览器窗口变大缩小时，其左右浮动位置大小都不会改变）

        .container{
   
            width: 500px;
            height: 130px;
            border: