div本身不布局，只承载内容；所有布局效果均依赖css设置。其默认display:block仅保证独占一行，不自动撑宽或换行，需通过flex、grid等显式激活布局上下文，并注意bfc触发、盒模型、语义化等关键细节。
div 本身不布局，只承载；所有“布局效果”都来自 CSS —— 这是它最常被误解的核心。
为什么 div 写了 5 层还是堆成一柱子？
因为 div 默认是 display: block，但块级元素只保证“独占一行”，不保证“撑满宽度”或“自动换行”。没加任何 CSS 时，它就老老实实按内容宽度、自然高度渲染。
- 子 div 不换行？不是 div 的错，是父容器没设
display: flex或display: grid - width: 300px 不生效？可能父容器是
inline或flex且未设flex-shrink: 0，也可能忘了box-sizing: border-box - 高度塌陷（比如 float 子项导致父 div 高度为 0）？常见于没触发 BFC，可用
overflow: hidden、display: flow-root或伪元素清除浮动
flex 布局里 div 怎么设才不白写？
关键不在 div 标签本身，而在你是否显式激活了 flex 上下文。光写 <div class="container"> 没用，必须配 CSS。
<ul>
<li>父 div 必须设 <code>display: flex 或 display: inline-flex，否则所有 justify-content、align-items 都无效
<span></span> 或 <img>，得先加 display: block 才能受 align-items: stretch 影响flex-wrap: wrap 极易被忽略 —— 默认 nowrap，内容超宽就溢出，不是自动折行flex-direction: column 要显式写，别默认主轴是横向；align-items 垂直居中效果依赖父容器有明确高度grid 容器里 div 为啥全挤在一列？
grid 不是“自动对齐表格”，它需要你定义轨道（track），否则所有子项都落在 grid-column: 1 / 2 和 grid-row: 1 / 2 上。
- 至少得写
grid-template-columns: 1fr 1fr或grid-template-rows: auto 1fr，哪怕只写1fr也比空着强 -
grid-column: 2 / 4要求父容器至少有 4 条垂直线（即 3 列），否则行为不可控，可能消失或错位 - 子 div 一旦加了
float或position: absolute，立刻脱离 grid 流，不再参与网格定位 - 想让子 div 占满整行？写
grid-column: 1 / -1，比硬算列数更安全
什么时候该用 div，什么时候不该碰？
div 是语义真空区，用对了是灵活，用滥了就是可访问性灾难和维护噩梦。
- 该用：轮播外层容器、JS 动态插入区域、纯视觉分组（如卡片阴影层、动画包裹层）
- 不该用：导航栏（用
<nav></nav>）、页脚（用<footer></footer>）、文章主体（用<article></article>或<section></section>） - 嵌套超过三层？先检查是不是能用
display: contents把中间层“隐形”，或直接用语义标签替代 - class 名别写
left-box-2或red-btn—— 语义模糊、样式耦合、重构即崩
真正难的不是怎么写 div，而是判断它是否必要；最容易被忽略的，是删掉一个 div 比加十个更接近好代码。
