CSS布局模式整理汇总：

1Flexbox布局：Flexbox（弹性布局）是一种用于创建一维布局的强大技术。它可以轻松实现水平和垂直居中、等高列、自适应布局等。使用display: flex来启用Flexbox布局。

2Grid布局：Grid（网格布局）是一种用于创建二维布局的技术。它使得将页面分割成行和列变得非常容易，可以实现复杂的布局结构。使用display: grid来启用Grid布局。

3响应式设计：使用媒体查询（Media Queries）来根据不同的屏幕尺寸和设备类型调整布局。这有助于确保您的网站在各种设备上都有良好的用户体验。

4定位（Positioning）：使用position属性来定位元素。常见的定位值包括static、relative、absolute和fixed。结合top、bottom、left和right属性，可以实现精确的布局。

5使用伪元素（Pseudo-elements）：通过添加伪元素（如::before和::after）来实现额外的装饰和布局效果。

6CSS框架：利用流行的CSS框架（如Bootstrap、Foundation、Bulma等）可以加速布局开发，提供了许多现成的组件和样式。

7精灵图（Sprites）：将多个小图标合并到一个图像文件中，然后使用background属性和偏移值来显示所需的图标，减少HTTP请求。

8弹性容器（Flex Containers）：将元素设置为弹性容器，使用Flexbox技术来创建更复杂的布局。

练习案例：一个基本的图文混排布局

.container 容器： width: 80%; 设置容器的宽度为80%。 margin: 50px auto; 将容器居中对齐，并在顶部和底部添加一些边距。 overflow: hidden; 用来清除浮动，以防止容器塌陷。

.image 图像：

float: left; 将图像左浮动，使文本环绕图像。 margin-right: 20px; 添加一些右边距，以在图像和文本之间创建间距。

.text 文本区域：

float: left; 将文本区域左浮动，使其与图像一起排列。 width: calc(100% - 200px); 计算文本区域的宽度，以适应容器宽度和图像的宽度及右边距。 .text h2 的 margin-top: 0; 用于消除标题的默认上边距

在后续的学习和实践中，我逐渐发现了浮动布局的缺点。在做的时候，就有很多复杂的问题，例如： <1>浮动的清除：为了防止容器塌陷，我们使用 overflow: hidden; 来清除浮动。这是一个常见的做法，但它可能会对一些特殊布局造成影响。

<2>计算宽度：在文本区域的宽度计算中，我们使用了 calc() 函数来减去图像的宽度和右边距。这在处理不同屏幕尺寸时可能会变得复杂。

<3>浮动带来的影响：浮动元素脱离了正常的文档流，可能会影响周围元素的布局。在这个案例中，我们必须小心处理宽度和间距，以确保布局正常。

这些问题对于新手需要不断调试，我认为我更加喜欢使用flex布局等更为简单的布局模式