双飞翼布局不依赖浮动元素撑高父容器，而是由中间内容区通过margin预留空间并由其内层非浮动块（如.main-wrap）撑开高度；清除浮动应优先用伪元素clearfix或display: flow-root，避免语义污染。
双飞翼布局本身并不需要额外标签来清除浮动——真正需要它的，是老式浮动布局中父容器高度塌陷这个共性问题，而双飞翼只是恰好用了浮动，所以被连带影响。
双飞翼结构里浮动元素为什么会导致父容器高度坍缩
因为 .left、.right、.main 全部设了 float，它们都脱离标准流。父容器（比如 .container）如果没设置高度，又没其他非浮动子元素撑高，就会收缩到 0 高度——这不是双飞翼独有的 bug，是所有纯浮动子元素的通病。
- 哪怕你把
.main改成float: left; width: 100%，它依然不参与文档流高度计算 -
.container的高度不会自动包含.left或.right的实际高度 - 结果就是：底部元素上移、背景色消失、边框只显示一条线
为什么“额外标签法”不是双飞翼推荐解法
在双飞翼中硬插一个 确实能触发 clear: both，但会破坏结构语义和维护性：
- 这个空
div和布局逻辑无关，纯属 hack，后续加 JS 动态插入内容时容易漏掉 - 双飞翼依赖精确的
margin-left/margin-right预留空间，额外标签若位置错（比如放在.left后面而非整个三栏之后），反而会打断浮动流 - IE6/7 下，块级空标签若没触发 hasLayout（如没设
zoom: 1），仍可能失效
现代双飞翼更该用伪元素清除浮动
真正干净的做法是给 .container 加 clearfix 类，用 ::after 生成清浮动节点：
.container::after {
content: "";
display: table;
clear: both;
}
这样做的关键好处：
- 不污染 HTML 结构，所有清除逻辑收束在 CSS 里
-
display: table兼容 IE8+，比display: block更稳妥（后者在某些旧版 Safari 下 clear 失效） - 如果项目支持现代浏览器，直接用
display: flow-root更省事：.container { display: flow-root; }，它原生触发 BFC 且无裁剪副作用
真正容易被忽略的是：双飞翼的“清浮动”目标不是让父容器“感知浮动子元素高度”，而是让它根本不必依赖浮动子元素撑高——靠 .main-wrap 这个非浮动内层块来撑开高度，才是设计本意。强行用额外标签去“补救”浮动塌陷，等于绕开双飞翼最核心的解耦思想。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
