在长沙的网站制作公司，作为一名网站制作和建设人员，网站制作过程中的基础布局技术是CSS中最基础且必须掌握的。
1. 文档流（Normal Flow）
这是浏览器默认的布局方式，无需任何CSS设置。
-
块级元素（如 , , ）：独占一行，从上到下垂直排列。 -
行内元素（如 , , ![]()
）：在一行内水平排列，直到放不下才会换行。
2. display 属性
通过改变元素的 display 值，可以改变其布局行为。
-
display: block;：使元素变为块级元素。
-
display: inline;：使元素变为行内元素。
-
display: inline-block;：元素像行内元素一样水平排列，但可以设置宽高（类似于替换元素）。
3. 浮动（Float）
最初是为实现文字环绕图片的效果，后来被广泛用于多栏布局。
.left { float: left;
width: 30%;
}
.right { float: right;
width: 70%;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
4. 定位（Position） 用于精确控制元素的位置。
-
static（默认）：元素处于文档流中。
-
relative（相对定位）：相对于自身原本的位置进行偏移，原本空间保留。
-
absolute（绝对定位）：相对于最近的非 static 定位的祖先元素进行定位，完全脱离文档流。
-
fixed（固定定位）：相对于浏览器窗口进行定位，脱离文档流（常用于导航栏、弹窗）。
-
sticky（粘性定位）：在 relative 和 fixed 之间切换。在目标区域内表现为 relative，当滚动超出目标区域时表现为 fixed（常用于表头）。