bfc能解决浮动布局中父容器高度塌陷、主栏换行、文字环绕及margin重叠等问题；关键在于侧边栏float后主栏需用margin腾出空间，且父容器必须触发bfc（如overflow:hidden）以包含浮动元素并维持布局完整性。
浮动布局下侧边栏固定、主栏自适应，关键不是写对 float，而是主栏的 margin 要精准匹配侧边栏宽度，且父容器必须触发 BFC 防止塌陷。
为什么写了 float: right 和 width: 240px，主栏还是换行了？
常见错误是只给侧边栏设 float，却忘了主栏需要主动“让位”。浮动元素会脱离文档流，但主栏仍按默认块级行为占满整行，自然被挤到下一行。
- 侧边栏必须明确
width（如240px），否则浮动后宽度由内容撑开，不可控 - 主栏必须用
margin-right（右浮动时）或margin-left（左浮动时）预留空间，值 ≥ 侧边栏宽度 + 少量余量（如250px） - 父容器需触发 BFC，否则高度塌陷：推荐
overflow: hidden或display: flow-root；旧项目兼容 IE6–7 可加zoom: 1
margin 值设成和侧边栏 width 完全一样，为什么还有缝隙或重叠？
因为 margin 是外边距，不包含边框、内边距。如果侧边栏有 border 或 padding，实际占用空间 > width。
- 计算公式：主栏
margin-right= 侧边栏width+border-width× 2 +padding-left+padding-right - 更稳妥做法：把侧边栏的
box-sizing设为border-box，再统一按width设置margin - 避免用百分比宽度混搭像素值——
width: 20%的侧边栏，主栏不能写margin-right: 200px，基准不一致
HTML 中主内容在前、侧边栏在后，还能用浮动吗？
能，但必须用负 margin 技巧，且 DOM 顺序不能改。
- 侧边栏仍
float: right，但主栏要先声明width: 100%，再用负margin-right拉回留空位置（如margin-right: -240px） - 主栏内部再套一层
div，设margin-right: 240px，确保内容不被侧边栏遮盖 - 此法在 Safari 旧版或某些缩放比例下易错位，现代项目优先选 Flex；仅当必须支持 IE8–9 时才考虑
移动端横屏/缩放时 margin 失效怎么办？
浮动布局本身不响应式，margin 是静态像素值，屏幕一变就露馅。
- 别硬扛：加媒体查询，横屏时改用
flex或直接堆叠（float: none+width: 100%） - 慎用
calc(100% - 240px)给主栏设宽——浮动下它和margin冲突，且100%基准不稳定 - 真正要响应式，浮动只是过渡方案；主栏用
min-width: 0配合overflow-wrap: break-word，防长链接撑破布局
浮动实现两栏，核心就两条：侧边栏靠浮动“抢位”，主栏靠 margin “腾地”。但一旦涉及响应式、嵌套、长文本或 IE 兼容，margin 的计算和 BFC 的触发极易漏掉——这些细节不补全，布局随时垮掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
