左右侧边栏不贴边是因父容器未清除浮动或边距干扰，应加overflow:hidden触发bfc，设固定宽且总和≤父宽，中间内容用margin腾空而非设width。
float实现三栏布局时，左右侧边栏不贴边怎么办
左右float后内容没顶到容器边缘，常见原因是父容器没清除浮动，或侧边栏外边距/内边距干扰了定位。浏览器会把浮动元素从文档流中“抽出来”，如果父容器没高度，中间内容就会上移、压住侧边栏。
实操建议：
- 给父容器加
overflow: hidden或overflow: auto——最轻量的BFC触发方式，兼容IE8+ - 避免在
float元素上设margin朝向浮动方向（比如左栏设margin-right），容易引发双倍边距bug（IE6） - 左右侧边栏必须声明
width，且总和不能超过父容器宽度，否则会换行
左右定宽+中间自适应，为什么用float比flex更难控制
float本身不提供“剩余空间分配”能力，中间内容必须手动计算width，而flex靠flex: 1自动填满。但如果你要支持IE9及以下，float仍是唯一选择。
实操建议：
- 左栏
float: left; width: 200px，右栏float: right; width: 150px - 中间内容不设
float，但必须加margin-left: 200px和margin-right: 150px腾出空间 - 不要给中间内容设
width——它会覆盖margin效果，导致错位
IE6/7下left/right侧边栏错位或叠在一起
典型表现是两栏都挤在左边，或者右栏掉到下一行。根本原因是IE6/7对float和display的解析异常，尤其当HTML注释、空格、换行出现在浮动元素之间时。
实操建议：
- 左右侧边栏的HTML标签必须紧挨着写，中间**不能有换行或空格**：
<div class="left">...</div> <div class="right">...</div> - 给左右栏都加
display: inline（IE6双倍边距修复的一部分） - 确保父容器没有
zoom: 1以外的hasLayout触发方式混用，比如同时写height: 1%和overflow: hidden
浮动侧边栏内容超出时，如何避免撑破父容器
当左/右侧边栏里放了长文本、图片或未约束的pre块，float不会自动折行或隐藏，会直接突破设定宽度，带崩整个布局。
实操建议：
- 对侧边栏内部所有可能溢出的元素加
word-break: break-word或overflow-wrap: break-word - 图片强制约束：
max-width: 100%; height: auto - 代码块等预格式内容加
white-space: pre-wrap，再配overflow-x: auto
浮动布局的脆弱性全藏在细节里：一个没清的浮动、一处没算准的margin、一段没截断的文本，都可能让两栏瞬间垮掉。它不像flex那样容错，但只要把边界条件盯死，依然能稳住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
