可以用以下8中方法实现CSS网页布局：

1. 利用浮动布局

2. 使用绝对定位

3. 灵活使用盒模型（如border, padding, margin）

4. 利用Flexbox 或者Grid布局

5. 利用 display 属性（如 inline, block,inline-block）

6. 利用 table 或 table-cell属性布局

7. 使用 Z-index 控制层叠

8. 使用:after和 :before伪元素清除浮动

1、利用浮动布局

浮动布局是 CSS 中常用的布局技巧，主要用于让元素在一行内实现浮动布局。当元素使用浮动布局后，它会从文档流中独立出来，不再对其他元素产生影响。浮动布局可以让元素在页面上以水平方向的方式展示，且两端对齐，常常用于实现图文布局或多列布局等效果。

使用浮动布局的语法如下：

element {  float: left; /* or right */}

浮动布局需要注意的是，使用浮动布局的元素会独立出来，因此其后面的元素会被它覆盖。为了解决这个问题，我们需要清除浮动，例如使用下面的代码：

.clearfix::after {  content: "";  clear: both;  display: table;}

这样，我们就可以让浮动布局的元素与其他元素正常的展示了。

2、绝对定位

绝对定位是 CSS 中的一种布局技巧，主要用于让元素在页面中以绝对定位的方式进行布局。绝对定位元素会脱离文档流，不再对其他元素产生影响。

使用绝对定位的语法如下：

element {  position: absolute;  top: value;  right: value;  bottom: value;  left: value;}

绝对定位元素需要配合定位上下文使用，即定位上下文需要具有相对定位或固定定位。这样，绝对定位元素才能正常的进行定位。

绝对定位元素的定位是相对于它的最近的已定位祖先元素进行定位的。如果没有已定位的祖先元素，则定位是相对于浏览器窗口的。

绝对定位元素的 top、right、bottom 和 left 属性的值决定了元素的定位位置。如果同时设置了 top和 bottom，则元素的高度会根据父元素的高度自适应；如果同时设置了 left 和 right，则元素的宽度也会根据父元素的宽度自适应。

3、灵活使用盒模型（如 border, padding, margin）

* 对于不同结构，可以用不同样式，为了性能、兼容、方便开发等等，将提高可维护性

01. 元素间的盒模型

- 间距的设定: margin, padding, 合适的间距可以改善网页的布局及阅读体验

- 边框的设定: border, border-width 及 border-style

- 设置超出盒模型的内容隐藏: overflow

02. 块状元素和内联元素的区别

- 块状元素: 块状元素从新行开始，独占一块排版区域，可以设置宽度，如 <div>、<h1> 、<p> 等

- 内联元素: 内联元素在元素框内不能换行，不可以设置宽度， 如 <span>、<a> 、<img> 等

4、利用 Flexbox 或者 Grid 布局

Flexbox

原理：Flexbox 是Flexible Box的简写，意为弹性布局，用来为盒状模型提供最大的灵活性。

优点：

1. 灵活性高：可以自动灵活调整空间排列；

2. 使用方便：可以设置多个轴，布局也比较容易理解，支持媒体查询等；

3. 支持回弹页面：可以实现回弹的页面布局效果；

4. 高效的文字排版：可以让文字自动换行等；

5. 兼容性良好：可以兼容现代浏览器，也可以兼容较旧的浏览器。

Grid网格布局

Grid 网格布局是 CSS 中一种实现元素结构精确控制和组织的方式。

它用行（row）和列（column）的概念来对网页内容进行排版，以更加有效的使用网页的空间。在有足够的内容放入后，它可以让网页内容自动地排列，然后根据窗口大小来调整页面中元素的尺寸和布局。

它可以用来实现，例如摘要（summary），引用（quote）、索引（index）等几大类型的布局，还可以创建网络设计中使用的微型框架，或两栏布局或三栏布局。

5、利用 display 属性（如 inline, block, inline-block）

display 属性可以让我们控制元素在网页上的布局，比如：

- inline：与周围的文本元素保持行内关系，元素不可调整宽高；

- block：在文档流中另起一行，可以调整宽高；

- inline-block：与周围的文本元素保持行内关系，同时可以调整宽高；

- flex：使用弹性盒子模型对子元素进行定位；

- grid：使用九宫格模型对子元素进行定位；

6、利用 table 或 table-cell 属性布局

表格单元格（table-cell）是用来布置网页格局的一种通用机制。它使用 TABLE 元素把 HTML 内容组织为一个表格，通常为行和列。然后可以使用TABLE 元素的属性和样式调整每个单元格的大小和位置。

一个典型的网页布局的表格包括标题，主要内容，广告区和页脚等不同块。每个块都放在一个表格单元格中，以便调整位置，更改大小和更改对齐。通常，标题块会占据整个表格的宽度，而页脚会从左到右横跨表格的最下面两行。

使用表格单元格网页布局的主要优势是灵活性，便于根据需求调整布局。表格单元格还可以嵌套，可以轻松实现一些复杂的布局。由于TABLE 元素可以对内容进行更改，也可以用于将复杂的图形放置在页面上。

7、使用 Z-index 控制层叠

z-index 是 CSS 中的一个属性，用于控制元素的层叠顺序。z-index 可以为元素指定一个整数值，该整数值代表了该元素相对于其他元素的层叠顺序。元素的 z-index 越高，该元素就越靠前，显示在其他元素的上面。

使用 z-index 的语法如下：

element {  position: absolute; /* 元素需要具有定位属性 */  z-index: value;}

z-index 只对定位元素有效，对于非定位元素，z-index 属性不起作用。所以，如果要使用 z-index 控制元素的层叠顺序，元素需要具有定位属性。

当多个元素具有相同的定位属性时，可以使用 z-index 控制它们的层叠顺序。这样，我们可以轻松的制作出网页中的弹出层、悬浮层等效果。

总的来说，z-index 可以帮助我们解决网页布局中的层叠顺序问题，使得我们可以更加方便地实现各种复杂的布局效果。

8、使用 :after 和 :before 伪元素清除浮动

在网页布局中，使用 :after 和 :before 伪元素清除浮动是一种常用的方法。当元素设置为浮动时，它们可能不再遵循正常的文档流，因此可能会造成布局问题。使用 :after 和 :before 伪元素可以清除浮动，使元素遵循文档流，从而保证布局的正确性。

除了使用伪元素清除浮动，还有其他技巧可以实现网页布局，如使用浮动、绝对定位、盒模型等。网页布局技巧的选择取决于你想要实现的布局效果和需求。