CSS布局技巧学习笔记
每种布局方式都有其独特的优势和局限性，而选择合适的布局方式，也正是构建高效网页的关键。
1. 浮动布局（**float**）
刚开始接触浮动布局时，我对它的用途并没有太多认识。后来逐渐明白，浮动并不仅仅是为了让文字绕图，而是它能在一些简单的布局中发挥大作用。虽然现在有更现代的布局工具如Flexbox和Grid，但浮动布局仍然有它的历史意义，尤其是在一些老旧的项目中依然会用到。
浮动的一个问题是它会让元素脱离文档流，这样容器就没有了内容的高度。为了解决这个问题，我发现使用 overflow: hidden 或者 clearfix 来清除浮动是必不可少的。
.container {
width: 100%;
overflow: hidden; /* 清除浮动 */
}
.left, .right {
width: 48%;
margin: 1%;
float: left;
}
通过这种方式，父容器 .container 的高度不会因为浮动的子元素而塌陷，浮动布局的两列结构就能正常显示。
2. 定位布局（**position**）
在学习 position 属性时，我一开始有点迷茫，尤其是理解 absolute 和 relative 的关系。后来我意识到，absolute 定位是相对于最近的有定位的祖先元素来确定位置的，而 relative 定位则是基于元素原始位置的偏移。这让我在处理弹出层和固定定位的元素时更加得心应手。
通过设置 position: relative，我可以让父容器成为定位的参照点，而子元素使用 position: absolute 就能精确地定位到容器内的某个位置。
.container {
position: relative; /* 相对定位*/
width: 100%;
height: 200px;
}
.box {
position: absolute; /* 绝对定位 */
top: 20px;
right: 20px;
width: 100px;
height: 100px;
background: red;
}
定位让我能精确控制元素的位置，尤其是在一些模态框、下拉菜单等需要脱离常规文档流的元素时，absolute 定位显得尤为重要。
口诀：“子绝父相”
3. Flexbox布局
Flexbox 是我学习过程中最有感触的布局工具之一。它的设计理念让我一下子明白了如何通过一个简单的容器来控制子元素的排列方式。以前我做布局时，可能需要手动调整每个元素的 margin 和 padding，但用 Flexbox 后，所有的对齐问题都变得简单多了。
尤其是通过 justify-content 和 align-items，我可以轻松实现水平和垂直居中，这对我在做响应式布局时非常有帮助。它的灵活性和易用性让我渐渐喜欢上了这个工具。
.container {
display: flex;
justify-content: space-between; /* 让子项均匀分布 */
align-items: center; /* 垂直居中对齐 */
}
.item {
width: 100px;
height: 100px;
background-color: green;
}
这种布局方法特别适用于需要在容器中均匀分布或者居中对齐的场景，比如按钮组、卡片列表等。灵活的子项排列方式也让我在处理一些动态元素时变得更加得心应手。
4. Grid布局
Grid 布局的学习让我深刻体会到二维布局的强大。与 Flexbox 只处理一维布局不同，Grid 布局让我能同时控制行和列，能够实现更复杂的布局效果。虽然一开始对它的语法有些困惑，但经过实际操作后，我发现它非常适合用于设计复杂的网格系统，比如图片画廊、仪表盘或者多列页面。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列布局 */
grid-gap: 10px; /* 网格项之间的间隔 */
}
.item {
background-color: orange;
height: 100px;
}
通过 grid-template-columns 设置列数和宽度，grid-gap 控制网格项之间的间距。这让我能够轻松实现响应式布局，特别是在设计多列的复杂页面时，Grid 提供了比 Flexbox 更为直观的控制方式。
