可以用以下8中方法实现CSS网页布局：
利用浮动布局
使用绝对定位
灵活使用盒模型（如border, padding, margin）
利用Flexbox 或者Grid布局
利用 display 属性（如 inline, block,inline-block）
利用 table 或 table-cell属性布局
使用 Z-index 控制层叠
使用: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. 块状元素和内联元素的区别
- 块状元素: 块状元素从新行开始，独占一块排版区域，可以设置宽度，如
、 、
等
- 内联元素: 内联元素在元素框内不能换行，不可以设置宽度， 如 、 、
等
4、利用 Flexbox 或者 Grid 布局Flexbox
原理：Flexbox 是Flexible Box的简写，意为弹性布局，用来为盒状模型提供最大的灵活性。
优点：
灵活性高：可以自动灵活调整空间排列；
使用方便：可以设置多个轴，布局也比较容易理解，支持媒体查询等；
支持回弹页面：可以实现回弹的页面布局效果；
高效的文字排版：可以让文字自动换行等；
兼容性良好：可以兼容现代浏览器，也可以兼容较旧的浏览器。
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 伪元素可以清除浮动，使元素遵循文档流，从而保证布局的正确性。
除了使用伪元素清除浮动，还有其他技巧可以实现网页布局，如使用浮动、绝对定位、盒模型等。网页布局技巧的选择取决于你想要实现的布局效果和需求。
希望以上答案对你有帮助，如果你要完整学习前端CSS阶段，可以进入粉丝群或者通过给我发消息方式参与！
为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通
共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发
这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！
过程中【不涉及】任何费用和利益，非诚勿扰 。
如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自公众号！老师会邀请你进入学习，并给你发放相关资料。
扫一扫添加微信