流式布局由盒模型和尺寸计算逻辑决定，百分比需明确参照系（包含块）才生效；未设width的父元素导致子元素百分比按视口计算，box-sizing: border-box是底线，配合max-width实现响应边界。
流式布局不是靠百分比堆出来的，而是靠盒模型行为和尺寸计算逻辑共同决定的——百分比值只有在有明确参照系时才生效，否则就是无效声明。
百分比宽度为什么有时不生效
常见现象：width: 100% 没反应，或者元素溢出容器；margin-left: 5% 在某些浏览器里偏移量异常。根本原因是：百分比是相对于包含块（containing block）计算的，而包含块未必是你以为的那个父元素。
- 如果父元素没设
width（比如默认width: auto），子元素的width: 50%实际按视口宽度算，而非父容器可视区域 -
padding和border默认计入width（即box-sizing: content-box），所以width: 100%; padding: 10px必然溢出 - 浮动、绝对定位、flex item、grid item 的包含块规则各不相同，不能一概而论
必须配合 box-sizing: border-box
这是流式布局不出错的底线。默认的 content-box 让百分比宽度失去可预测性，尤其在加了 padding 或 border 后。
- 全局重置推荐写法：
* { box-sizing: border-box; }，但注意它会影响font-size等继承行为，慎用于第三方组件内部 - 只对流式容器启用更稳妥：
.fluid-row { box-sizing: border-box; width: 100%; } - 不加这句，
width: 33.33%; padding: 1rem的三列布局大概率换行
用 max-width + width: 100% 控制响应边界
纯百分比会无限缩放，实际项目中需要“流式但有上限”。这不是补丁，而是流式布局的正常形态。
立即学习“前端免费学习笔记（深入）”；
- 典型写法：
width: 100%; max-width: 1200px; margin: 0 auto;，既适配小屏，又防大屏拉伸变形 - 避免在
max-width容器内再嵌套固定宽度子元素（如width: 960px），否则小屏下会横向滚动 -
min-width要慎用——它可能强制触发水平滚动条，尤其在移动端
真正难的不是写百分比，而是判断每个百分比值背后那个“参照块”到底是谁。调试时右键检查元素，看 computed 标签页里的 width 实际值，比猜更可靠。
