CSS的大致布局技巧大致有以下几种：
浮动（Float）布局：
适用于创建多列布局，如左侧导航栏和右侧内容区域。使用float属性设置元素的浮动方向（left或right）并调整宽度以创建列布局。浮动布局主要用法就是为了让块级的元素出现在同一行中，通常出现在div这种父子结构之中，为子元素添加浮动特性，特点就是会脱离文档流，解决方法就是给父级元素清除浮动。
<div class="page-header clearfix">
<div class="logo leftfix">logo</div>
<div class="banner1 leftfix">banner1</div>
<div class="banner2 leftfix">banner2</div>
</div>
</div>
定位（Position）布局：
用于创建特定位置的元素，如固定的导航栏或悬浮按钮。使用position属性与top，left，bottom，right属性配合，可通过设置position: fixed实现固定定位。其中的相对定位（relative可以修改为）绝对定位（absolute），固定定位（fixed）粘性定位（sticky）等
.box2 {
position: relative;
}
弹性盒子（Flexbox）布局：
适用于创建自适应布局，使元素在不同屏幕尺寸下灵活排列。使用display: flex设置容器为弹性布局，并使用flex-direction，flex-wrap，justify-content，align-items等属性来控制元素的排列和对齐方式
多列布局：
当页面中需要展示大量的文字内容或者图片时，读者阅读情况就会非常的糟糕，为了提高阅读的舒适性，在CSS3中引入了多列布局模块，以简单的形式分为多列，多列布局用于将内容分割为多个列，或者将多个图片以网格形式进行展示。
/* column-count: 5; */
/* 指定每一列的宽度，会自动计算列数 */
/* column-width:220px ; */
/* 复合属性，能同时指定列宽和列数（不推荐使用） */
columns: 4;
/* 调整列间距 */
column-gap: 20px;
/* 每一列的边框宽度 */
/* column-rule-width: 2px; */
/* 每一列的边框风格 */
/* column-rule-style: dashed; */
/* 每一列的边框颜色 */
/* column-rule-color: red; */
/* 边框相关的复合属性 */
column-rule: 2px dashed red;
响应式布局：
在互联网发达的今天，我们的开发已经无法满足移动设备上的需求，手机端PC端需要不同的开发会很麻烦，所以使用响应式布局就可以解决这个问题， 响应式布局用于创建适应不同设备和屏幕尺寸的布局。使用媒体查询来根据不同的屏幕尺寸应用不同的CSS样式和布局。
总结：
这些布局技巧可以单独使用，也可以结合使用以创建复杂的布局。在实践中，可以根据具体的需求和设计来选择合适的布局方式。同时，灵活运用CSS布局属性和单位，如width，height，margin，padding等，可以更好地控制布局效果。同时，也需要考虑实用性，可观性，根据不同的内容使用不同的布局效果，争取让我们的布局更加美观。
