在长沙的网站制作公司，作为一名网站制作和建设人员，网站制作过程中的基础布局技术是CSS中最基础且必须掌握的。

1. 文档流（Normal Flow）

这是浏览器默认的布局方式，无需任何CSS设置。

• 块级元素（如 <div>, <p>, <h1>）：独占一行，从上到下垂直排列。

• 行内元素（如 <span>, <a>, <img>）：在一行内水平排列，直到放不下才会换行。

2. display 属性

通过改变元素的 display 值，可以改变其布局行为。

• display: block;：使元素变为块级元素。

• display: inline;：使元素变为行内元素。

• display: inline-block;：元素像行内元素一样水平排列，但可以设置宽高（类似于替换元素）。

3. 浮动（Float）

最初是为实现文字环绕图片的效果，后来被广泛用于多栏布局。

• 值：left, right, none。

• 特点：元素会脱离文档流，向左或向右浮动，直到碰到父容器或另一个浮动元素。

• 遗留问题：需要清除浮动，否则会导致父容器高度塌陷。现在不推荐用于主页面布局，但在文字环绕等特定场景下仍有价值

.left { 

float: left; 

width: 30%; 

}

.right { 

float: right; 

width: 70%; 

}

.clearfix::after { 

/* 清除浮动 */  

content: "";  

display: table;  

clear: both;

}

用于精确控制元素的位置。

• static（默认）：元素处于文档流中。

• relative（相对定位）：相对于自身原本的位置进行偏移，原本空间保留。

• absolute（绝对定位）：相对于最近的非 static 定位的祖先元素进行定位，完全脱离文档流。

• fixed（固定定位）：相对于浏览器窗口进行定位，脱离文档流（常用于导航栏、弹窗）。

• sticky（粘性定位）：在 relative 和 fixed 之间切换。在目标区域内表现为 relative，当滚动超出目标区域时表现为 fixed（常用于表头）。