结论：布局由css控制，html仅提供结构锚点；未设display:flex/grid或float的div只是无宽高、无样式的空盒子，所有布局失效首先检查父容器display属性是否正确启用。
直接说结论：<div> 本身不布局，只提供结构锚点；真正起作用的是 CSS —— 没设 <code>display: flex、<code>display: grid 或 <code>float，它就只是个“看不见的空盒子”。
<h3>为什么写了 <code><div> 却看不到效果
<p>因为浏览器把 <code><div> 当作纯块级容器，无默认宽高、无背景、无边框、不强制换行（除非内容撑开或 CSS 干预）。常见错误现象：
<ul>
<li>只写 <code><div id="header"></div>，没加任何 CSS，页面上完全空白
<div> 垂直堆叠，误以为“应该并排”，其实是流式布局的默认行为
<li>父 <code><div> 里子元素用了 <code>float，但父容器高度塌陷成 <code>0
<p>实操建议：</p>
<ul>
<li>关键布局容器必须带 <code>class 或 <code>id，避免用内联 <code>style="..." 写死样式
display: flex 或 <code>display: grid 替代 <code>float —— 后者需手动 <code>clear，且无法响应式伸缩
overflow: hidden 或伪元素 <code>::after { content: ""; display: table; clear: both; } 清除浮动
display: flex 和 <code>display: grid 的根本区别
Flex 是一维布局（主轴 + 交叉轴），适合线性排列；Grid 是二维布局（行 + 列），适合区域划分。两者都依赖父容器显式开启上下文。
- 只给子元素写
flex: 1，但父容器没设 <code>display: flex → 完全无效 - 写了
grid-column: 1 / 3，但容器没定义 <code>grid-template-columns → 网格线不存在，定位失效 flex-direction: column 不会自动让子项等高；<code>grid-template-rows: 1fr 1fr 才能强制均分高度- 响应式卡片列表推荐
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，不是 <code>1fr 1fr 1fr
语义化容器该什么时候替换 <div>
<p>不是“能不能用”，而是“要不要暴露结构意图”。屏幕阅读器、SEO 工具、浏览器解析都依赖语义。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li><code><nav> 替代 <code><div class="nav">：前者被识别为导航区域，后者只是普通盒子
<li><code><main> 必须全局唯一，不能嵌套在 <code><section> 或 <code><div> 里，否则语义失效
<li><code><header> 和 <code><footer> 应用于逻辑头部/尾部，不是所有带背景色的条状区域都该用</footer>
<div>）往往说明结构没理清，或 CSS 抽离不足，而非布局需要
<h3><code>gap、<code>margin 和 <code>padding 的分工陷阱
三者常被混用，但作用层级和影响范围完全不同。
gap 只作用于 Flex/Grid 容器内部项目之间的空隙，不影响外边距逻辑，也不触发 margin collapse- 给每个网格项写
margin-bottom 是过时做法：最后一行多出空白、小屏错位、响应式失效 padding 是容器自身内边距，影响内容区域大小；<code>margin 是容器对外间距，影响与其他兄弟元素的距离gap 不支持 IE，如需兼容，可用 <code>margin + <code>:last-child { margin: 0 } 降级
最易被忽略的一点：Grid 和 Flex 的起点是父容器的 display 值，而不是子元素的 class；所有布局失效，第一反应不该是查子元素属性，而应确认父容器是否真正开启了对应上下文。
