一、浮动布局

浮动布局是一种常见的CSS布局技巧，通过设置元素的float属性来实现。然而，浮动元素可能会导致父级容器无法正确计算高度，从而影响布局。为了清除浮动并解决这个问题，可以向父级容器添加overflow属性，并将属性值设置为hidden。

应用场景：

• 实现多列布局，如导航栏、文章列表等。
• 实现文字环绕图片的效果。

实操示例

    <style>
        .navbar {
            overflow: hidden;
            /* 添加overflow属性并设置为hidden */
            background-color: #f1f1f1;
        }
        .navbar ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .navbar li {
            float: left;
        }
        .navbar li a {
            display: block;
            padding: 10px 16px;
            text-decoration: none;
            color: #333;
        }

在这个示例中，我创建了一个导航栏，并使用浮动布局 float: left; 将导航项水平排列。为了清除浮动，我们向父级容器 .navbar 添加了 overflow 属性，并将属性值设置为 hidden。这样，父级容器将包裹浮动的子元素，实现导航栏的正常显示。

二、定位布局

以下是一些定位小技巧。

• 固定定位盒子贴着版心右侧对齐：
  • 让固定的盒子left: 50%（版心的一半）
  • 让它的margin-left: 版心盒子宽度的一半
• 绝对定位的盒子居中：（其他方位同理）
  • left: 50%（盒子左侧移到父级元素的中心位置）
  • margin-left: -自身宽度的一半（负值）

应用场景

• 固定定位贴着版心右侧对齐：常见于侧边栏、悬浮工具栏等。
• 绝对定位的盒子居中：适用于将绝对定位的盒子水平居中对齐，常见于模态框、弹出菜单等。

实操示例

        .container {
            position: relative;
            width: 800px;
            margin: 0 auto;
            /* 设置版心居中 */
            background-color: #f1f1f1;
            padding: 20px;
        }
        .fixed-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-left: 400px;
            /* 版心盒子宽度的一半 */
            background-color: #ddd;
            padding: 10px;
        }
        .absolute-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-left: -100px;
            /* 盒子宽度的一半 */
            background-color: #ddd;
            padding: 10px;
        }

在上述示例中，我创建了一个容器 .container，其中分别放置了一个固定定位的盒子 .fixed-box 和一个绝对定位的盒子 .absolute-box。通过设置不同的定位属性和使用 transform 属性进行居中处理，实现了固定定位盒子贴着版心右侧对齐以及绝对定位盒子的居中对齐。

三、弹性盒子布局

下面是一些弹性盒子布局的水平垂直居中小技巧。

应用场景

当需要将元素在水平或垂直方向上居中对齐时，弹性盒子布局提供了简单的方法。

实操示例

在父级容器上设置 display: flex;，并使用 justify-content: center; 和 align-items: center; 分别实现水平和垂直居中对齐。

.container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

如果要让多个元素实现水平垂直居中的效果，还需要有flex-direction: column。

.flex__container  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

📌总结：以上只是一些常见CSS布局技巧，在实际开发中，我们可以根据实际需求，灵活选择和组合使用这些布局方式，以实现更完美的页面布局效果。