CSS布局入门：基础结构详解

.container {
  border: 1px solid #ccc;
}
.left {
  float: left;
  width: 200px;
}
.right {
  float: right;
  width: calc(100% - 200px);
}

解决方法只有两个靠谱的：

• 给父容器加 overflow: hidden（最轻量，但可能影响子元素溢出显示）
• 在父容器末尾加一个清除浮动的空元素：

别用 float 做三栏以上复杂布局——它本就不为此设计，维护成本高，响应式难做。

Flex 布局前，先确认你真的需要它

Flex 不是“更高级的 float”，它是为一维布局（单行或单列）优化的。如果你的需求是：

• 水平居中一个按钮 → text-align: center + display: inline-block 就够了
• 垂直+水平居中一个弹窗 → position: absolute + transform: translate(-50%, -50%) 更直接
• 导航栏等宽分布 → display: flex + justify-content: space-between 才是它该出场的时候

过早套用 display: flex 容易掩盖对基础流式行为的理解缺失。先能手写一个不依赖 Flex 的响应式导航（用 inline-block + @media），再学 Flex 才有判断力。

文档流是隐性的，但它比任何 CSS 属性都重要。所有“为什么这个元素没按我想的排”“为什么 margin 不生效”“为什么父容器没高度”，答案八成藏在 display 和 position 对文档流的改动里。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS布局入门：基础结构详解》文章吧，也可关注golang学习网公众号了解相关技术文章。