div只是无语义、无默认样式、不自动撑开或居中的空块级容器；需手动设置width/height/margin/flex等css才能实现布局效果，语义化标签优先，嵌套宜浅。
div 不是万能容器，它只是个没语义、没样式、不自动撑开、不自动居中的空盒子。你把它当“万能”用，十有八九是 CSS 没写对，或者该换语义标签了。
div 默认什么也不做，连宽度都不占满父容器
很多人写完 <div>内容</div> 就期待它自动填满屏幕或居中，结果发现它就裹着文字那么宽，上下堆叠——因为 div 默认是 display: block，但块级元素的宽度只取决于父容器和自身 width 设置，不是“默认 100%”。
- 想让它水平占满：必须加
width: 100%（且父容器不能是width: auto或未设宽） - 想让它垂直撑高：得设
height: 100%，同时确保所有父级（包括html、body）都有明确高度 - 想水平居中：要么设固定宽 +
margin: 0 auto，要么用display: flex+justify-content: center - 想垂直居中：单靠
div自身做不到，必须靠父容器的flex、grid或position: absolute配合transform
flex 布局里 div 最常漏写的三件事
现在所谓“div 布局”，90% 实际是给 div 加 display: flex。但光加这一句远远不够，下面三点漏一个，布局就失灵：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 忘了设
flex-wrap: wrap：默认nowrap，子项超宽直接溢出或压缩，不会自动折行 - 子项用了
float或display: inline：会脱离 flex 流，justify-content和align-items对它完全无效 - 父容器没设高度，却指望
align-items: center垂直居中：如果父div高度是auto，那它根本没“垂直空间”可居中
什么时候该换掉 div，而不是硬套 class
语义错误比样式错更难调试——读屏软件读不出 <div class="nav"> 是导航，SEO 也认不出这是导航区块。
<ul><li>用 <code><nav></nav> 替代 <div class="navigation">
<li>用 <code><main></main> 替代 <div id="content">
<li>用 <code><article></article> 或 <section></section> 替代 <div class="post">
<li>只有真没语义时才用 <code>div：比如轮播图外层包裹、动画过渡层、JS 动态插入的临时容器
嵌套超过三层 div 就该停下来想一想
<div><div><div><div>内容</div></div></div></div> 看似无害，实际埋了三颗雷：
- CSS 选择器容易失控，比如
.container .wrapper .inner .content既难维护又低效 - React/Vue 里组件拆分困难，逻辑和结构耦合太紧
- 移动端 DOM 深度大，JS 遍历或渲染稍有不慎就卡顿
- 优先考虑
display: contents（让父div不产生盒模型）、BEM 命名收敛作用域、或直接抽成自定义组件
真正难的从来不是怎么用 div，而是判断什么时候不该用它——尤其是当你要写第四个嵌套、第三个 float-left class、或者第十次加 !important 的时候。
