html三栏顺序必须为左栏→右栏→主内容，因浮动不重排dom，主内容需最后渲染并用margin避开两侧浮动；错误使用clear会导致掉底，父容器塌陷需用overflow: hidden触发bfc。
HTML中三栏元素的书写顺序必须是「左栏→右栏→主内容」
浮动本身不重排DOM，浏览器按HTML顺序逐个解析并渲染。如果主内容写在最前，它会先占据整行宽度（默认width: 100%），后面浮动的左右栏没空间可浮，只能被挤到下一行——这是最常见的“侧边栏掉底”现象。
正确顺序不是为了“让CSS生效”，而是为了让浮动元素有机会在主内容渲染前抢占位置。主内容应作为最后的“流内填充者”，靠margin-left和margin-right主动避开两侧浮动块。
- 左栏：
float: left，写在HTML最前面 - 右栏：
float: right，紧接左栏之后 - 主内容：不设
float，用margin-left/margin-right留空，写在最后
为什么不能用clear把主内容“拉上来”
clear只控制“本元素是否绕过前面的浮动”，它不会改变HTML解析顺序，也不能把后写的元素提前渲染。给主内容加clear: both只会让它强制换行到浮动元素下方，彻底破坏三栏意图。
常见错误是给主内容加clear: left或clear: right，以为能“顶开”某一边栏——实际只是让它避开那一侧，另一侧仍可能压住内容边缘，导致文字被截断或错位。
-
clear: left→ 主内容下移，避开左侧浮动，但右侧浮动仍可能覆盖其右边缘 -
clear: both→ 主内容整个掉到两栏下方，变成单列 - 真正需要的是“不触发clear”，靠
margin预留空间，让主内容自然居中
父容器高度塌陷不是顺序问题，但会影响后续布局
三栏浮动后父容器高度为0，是因为浮动元素脱离文档流，父容器无法感知子元素尺寸。这和HTML顺序无关，只和是否建立BFC或清除机制有关。若不处理，后续兄弟元素会上移覆盖三栏区域，造成视觉“顺序错乱”的假象。
推荐用overflow: hidden触发BFC，比伪元素::after更简单可靠；避免用空<div style="clear:both"></div>，语义差且易被误删。
-
overflow: hidden兼容性好，IE6+ 都支持 - 若父容器需滚动，改用
overflow: auto - 不要给父容器也设
float，否则它自身也会脱离文档流，导致祖先容器同样塌陷
响应式断点里浮动顺序依然有效，但需重置
小屏下取消浮动时，HTML顺序决定堆叠顺序。如果仍保持「左栏→右栏→主内容」，小屏就会显示为“左栏→右栏→主内容”，而非语义优先的“主内容→左栏→右栏”。SEO和屏幕阅读器都依赖这个顺序。
所以媒体查询里不仅要float: none，还要通过order（Flex）或grid-row（Grid）调整视觉顺序——但注意：order只改显示，不改DOM顺序，对爬虫无效；真要优化SEO，必须改HTML结构本身。
- PC端：HTML顺序 = 左→右→主，CSS浮动实现并排
- 移动端：HTML顺序应改为 主→左→右，再用
display: flex+flex-direction: column堆叠 - 混用
float和order会导致逻辑混乱，不建议
浮动布局的顺序陷阱，本质是把“视觉排列”和“结构语义”绑得太死。一旦HTML顺序和浮动方向不匹配，问题就从样式层穿透到可访问性和SEO层。改CSS不如先改HTML，这不是妥协，是回归语义优先的基本事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
